laravel+vue+vuetify 前端匹配不到数据记录 No matching records found

时间:2020-05-20
本文章向大家介绍laravel+vue+vuetify 前端匹配不到数据记录 No matching records found,主要包括laravel+vue+vuetify 前端匹配不到数据记录 No matching records found使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

后端数据:使用guzzle获取api数据,(安装扩展包guzzle)

use GuzzleHttp\Client;
//获取请求远程产品信息需要的参数
public function getParams(Request $request){
$code = $request->code;
$method = 'customapi.goods.get_goods_detail';
$params = createMinisoApiSign($method);
$params['spu'] = "$code";
//guzzle获取数据
$client = new Client(['base_uri'=>'api地址']);
$response = $client->request('POST','/openapi/customapi/api',['body'=>json_encode($params)]); //
['body'=>json_encode($params)]为请求时传的参数json格式

$body = $response->getBody();//guzzle获取的数据
$body_result = json_decode($body,true); //此处为获取的api数据
$arr = array();
//传化为前端需要的数据
foreach( $body_result['data']['intro'] as $key=>$value){
$arr[$key]['name'] = basename(parse_url($value)['path']);
$arr[$key]['path'] = $value;
}
return $arr;
}

前端vue:(获取到后端数据后最终要的
:server-items-length="remoteItemslength"仅在服务器提供数据时使用。 应该设置为服务器上可用项目的总数,以便分页可以正常工作,这个属性不写,v-data-table就会出现No matching records found
<v-data-table :server-items-length="remoteItemslength" :headers="remoteHeaders" :items="remoteItems" :loading="loading" class="elevation-1" :search="remoteSearch" v-model="remoteSelected" show-select>
<template v-slot:top>
<v-toolbar flat color="white">
<!-- 搜索框-->
<v-text-field v-model="remoteSearch" label="Search Code"></v-text-field>
<v-spacer></v-spacer>
<v-dialog v-model="itemDialog" max-width="500px">
<template v-slot:activator="{ on }">
<v-btn type="submit" v-on:click="searchRemotePic" color="primary" dark class="mb-2">
{{ $t('message.search') }}</v-btn>
</template>
</v-dialog>
</v-toolbar>
</template>
<template v-slot:item.path="{ item }">
<img :src="item.path" style="width:100px;"/>
</template>
</v-data-table>

获取到数据之后,为该变量赋值
this.remoteItemslength = res.data.length;

原文地址:https://www.cnblogs.com/xiaofeilin/p/12922748.html