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

Posted 2021-02-18 小林不会飞

后端数据：使用guzzle获取api数据，（安装扩展包guzzle）

use GuzzleHttpClient;

//获取请求远程产品信息需要的参数
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;