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

use GuzzleHttp\Client;
//获取请求远程产品信息需要的参数
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="width:100px;"/>
</template>
</v-data-table>

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

laravel+vue+vuetify 前端匹配不到数据记录 No matching records found的更多相关文章

  1. laravel+vue+vuetify(下载图片到本地)

    vue.js如何根据后台返回来的图片url进行图片下载   downloadByBlob(url,name) {                 let image = new Image()     ...

  2. MySQL多表数据记录查询详解

    在实际应用中,经常需要实现在一个查询语句中显示多张表的数据,这就是所谓的多表数据记录连接查询,简称来年将诶查询. 在具体实现连接查询操作时,首先将两个或两个以上的表按照某个条件连接起来,然后再查询到所 ...

  3. 前端向服务器请求数据并渲染的方式(ajax/jQuery/axios/vue)

    原理: jQuery的ajax请求:complete函数一般无论服务器有无数据返回都会显示(成功或者失败都显示数据): return result

  4. 循序渐进VUE+Element 前端应用开发(4)--- 获取后端数据及产品信息页面的处理

    在前面随笔<循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理>中介绍了在Vue + Element整合框架中,实现了动态菜单和动态路由的处理,从而可以根据 ...

  5. 循序渐进VUE+Element 前端应用开发(27)--- 数据表的动态表单设计和数据存储

    在我们一些系统里面,有时候会需要一些让用户自定义的数据信息,一般这些可以使用扩展JSON进行存储,不过每个业务表的显示项目可能不一样,因此需要根据不同的表单进行设计,然后进行对应的数据存储.本篇随笔结 ...

  6. Laravel+vue实现history模式URL可行方案

    项目:laravel + vue 实现前后端分离.vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. h ...

  7. Vue nodejs商城项目- 前后端数据传递

    .利用Mongoose查询MongoDB 通过mongoose插件可以简捷地从mondodb中获取数据,首先安装mongoose: cnpm install mongoose --save   使用m ...

  8. 循序渐进VUE+Element 前端应用开发(30)--- ABP后端和Vue+Element前端结合的分页排序处理

    在很多列表展示数据的场合中,大多数都会需要一个排序的处理,以方便快速查找排序所需的数据,本篇随笔介绍如何结合ABP后端和Vue+Element前端结合的分页排序处理过程. 1.Vue+Element前 ...

  9. 在Vue&Element前端项目中,对于字典列表的显示处理

    在很多项目开发中,我们为了使用方便,一般都会封装一些自定义组件来简化界面的显示处理,例如参照字典的下拉列表显示,是我们项目中经常用到的功能之一,本篇随笔介绍在Vue&Element前端项目中如 ...

随机推荐

  1. jmeter如何设置全局变量

    场景:性能测试或者接口测试,如果想跨线程引用(案例:A线程组里面的一个输出,是B线程组里面的一个输入,这个时候如果要引用),这个时候你就必须要设置全局变量;全链路压测也需要分不同场景,通常情况,一个场 ...

  2. Python基础教程,流程控制语句详解

    1.程序结构 计算机在解决问题时,分别是顺序执行所有语句.选择执行部分语句.循环执行部分语句,分别是:顺序结构.选择结构.循环结构.如下图: 很多人学习python,不知道从何学起.很多人学习pyth ...

  3. 修改mac系统名字&&神秘bogon

    问题分析 你是否遇见过突然终端突然出现奇怪 bogon # name @ bogon in ~ [22:31:01] $ 这是因为终端会先向 DNS 请求查询当前 IP 的反向域名解析的结果,如果查询 ...

  4. Django中的ORM如何通过数据库中的表格信息自动化生成Model 模型类?

    Inspectdb Django项目通过绑定的数据库中的相应表格直接自动化生成Model 模型类 python manage.py inspectdb Django 中的 ORM 可以实现对象关系映射 ...

  5. ngnix.conf的配置结构

    1.ngnix.conf的配置结构 2.部分配置文件说明 #worker进程可操作的用户 #user nobody; #设置worker的个数 worker_processes 1; #错误日志 #e ...

  6. Django记录数据库创建、更新、删除操作开源插件推荐

    github: django-simple-history - 安装 $ pip install django-simple-history - 配置 在Settings中添加 INSTALLED_A ...

  7. 2020-04-11:A系统联机同步调用B系统(A和B不是同一公司系统,不能用分布式事务),如何保证系统间数据准实时一致性(设计思路即可)?提醒:需要考虑调用超时、并发、幂等、反交易先到等问题

    福哥答案2020-04-12: 可参考微信支付和支付宝支付.

  8. C#LeetCode刷题之#168-Excel表列名称(Excel Sheet Column Title)

    问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3850 访问. 给定一个正整数,返回它在 Excel 表中相对应的 ...

  9. Java的注解浅析

    人的一生就像一篇文章,只有经过多次精心修改,才能不断完善 Java注解概念理解: Java注解又称为Java标注,是JDK5引入的一中注释机制,Java中大家熟悉的五种注解分别是:@Override, ...

  10. Android 重写物理返回键,在h5页面中返回上一个界面

    实现:Activity中放置webview,跳转到h5界面,点击返回键,不退出h5界面,而是返回上一个h5界面 /** * 改写物理按键--返回的逻辑,希望浏览的网页后退而不是退出浏览器 * @par ...