zoukankan      html  css  js  c++  java
  • laravel+vue+vuetify 前端匹配不到数据记录 No matching records found

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

    use GuzzleHttpClient;
    //获取请求远程产品信息需要的参数
    public function getParams(Request $request){
    //guzzle获取数据
    $client = new Client(['base_uri'=>'api地址']);
    $response = $client->request('POST','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="100px;"/>
    </template>
    </v-data-table>

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

    )
    
    
    踩过这个坑,还有下一个坑等着你,这一路就是给自己填坑,坑填多了,也就习惯了,直到这一路平坦了,也就无怨无悔了。
  • 相关阅读:
    纸牌游戏----小猫钓鱼
    数据结构-----栈
    浅谈队列
    排序算法实例
    排序算法之------快速排序
    排序算法之----冒泡排序
    Visual Studio-基本使用
    C++-GUID from string
    OS-Windows CMD生成文件夹目录结构
    OS-Windows10 DownLoad
  • 原文地址:https://www.cnblogs.com/xiaofeilin/p/12922748.html
Copyright © 2011-2022 走看看