laravel+vue+vuetify 前端匹配不到数据记录 No matching records found
后端数据:使用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的更多相关文章
- laravel+vue+vuetify(下载图片到本地)
vue.js如何根据后台返回来的图片url进行图片下载 downloadByBlob(url,name) { let image = new Image() ...
- MySQL多表数据记录查询详解
在实际应用中,经常需要实现在一个查询语句中显示多张表的数据,这就是所谓的多表数据记录连接查询,简称来年将诶查询. 在具体实现连接查询操作时,首先将两个或两个以上的表按照某个条件连接起来,然后再查询到所 ...
- 前端向服务器请求数据并渲染的方式(ajax/jQuery/axios/vue)
原理: jQuery的ajax请求:complete函数一般无论服务器有无数据返回都会显示(成功或者失败都显示数据): return result
- 循序渐进VUE+Element 前端应用开发(4)--- 获取后端数据及产品信息页面的处理
在前面随笔<循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理>中介绍了在Vue + Element整合框架中,实现了动态菜单和动态路由的处理,从而可以根据 ...
- 循序渐进VUE+Element 前端应用开发(27)--- 数据表的动态表单设计和数据存储
在我们一些系统里面,有时候会需要一些让用户自定义的数据信息,一般这些可以使用扩展JSON进行存储,不过每个业务表的显示项目可能不一样,因此需要根据不同的表单进行设计,然后进行对应的数据存储.本篇随笔结 ...
- Laravel+vue实现history模式URL可行方案
项目:laravel + vue 实现前后端分离.vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. h ...
- Vue nodejs商城项目- 前后端数据传递
.利用Mongoose查询MongoDB 通过mongoose插件可以简捷地从mondodb中获取数据,首先安装mongoose: cnpm install mongoose --save 使用m ...
- 循序渐进VUE+Element 前端应用开发(30)--- ABP后端和Vue+Element前端结合的分页排序处理
在很多列表展示数据的场合中,大多数都会需要一个排序的处理,以方便快速查找排序所需的数据,本篇随笔介绍如何结合ABP后端和Vue+Element前端结合的分页排序处理过程. 1.Vue+Element前 ...
- 在Vue&Element前端项目中,对于字典列表的显示处理
在很多项目开发中,我们为了使用方便,一般都会封装一些自定义组件来简化界面的显示处理,例如参照字典的下拉列表显示,是我们项目中经常用到的功能之一,本篇随笔介绍在Vue&Element前端项目中如 ...
随机推荐
- CF Contest 526 G. Spiders Evil Plan 长链剖分维护贪心
LINK:Spiders Evil Plan 非常巧妙的题目. 选出k条边使得这k条边的路径覆盖x且覆盖的边的边权和最大. 类似于桥那道题还是选择2k个点 覆盖x那么以x为根做长链剖分即可. 不过这样 ...
- luogu P5826 【模板】子序列自动机 主席树 vector 二分
LINK:子序列自动机 想了一些很有趣的做法. dp 容易看出 f[i][j]表示前i个数匹配了j个数的dp 不过复杂度很高. 贪心 容易想到匹配的时候每个数字尽量往前匹配 这样显然是最优的 复杂度Q ...
- 获取判断IE版本 TypeError: Cannot read property 'msie' of undefined
注意:以下方法只适用于IE11 以下: TypeError: Cannot read property 'msie' of undefined jquery1.9去掉了 $.browser 所以报错 ...
- Spring事务专题(三)事务的基本概念,Mysql事务处理原理
前言 本专题大纲: 我重新整理了大纲,思考了很久,决定单独将MySQL的事务实现原理跟Spring中的事务示例分为两篇文章,因为二者毕竟没有什么实际关系,实际上如果你对MySQL的事务原理不感兴趣也可 ...
- 002_解析go语言中的回调函数
回调函数是一种特殊的函数写法,在很多场景中发挥广泛的作用.但是对于初学者来说,回调函数是比较头疼的一个东西,不太好懂,笔者研究了一番,以网上的一个例子详细说明一下 首先看一个代码示例(来源于网上) p ...
- jQuery 购物车案例
h1 { text-align: center; } .cart { width: 1200px; height: 600px; margin: 0 auto; border: 1px solid # ...
- java_内部类、匿名内部类的使用
内部类 将一个类A定义在另一个类B里面,里面的那个类A就称为内部类,B则称为外部类. 内部类的分类 成员内部类,类定义在了成员位置 (类中方法外称为成员位置) 局部内部类,类定义在方法内 成员内部类 ...
- java 多态二
一 多态-转型 多态的转型分为向上转型与向下转型两种: 向上转型:当有子类对象赋值给一个父类引用时,便是向上转型,多态本身就是向上转型的过程. 使用格式: 父类类型 变量名 = new 子类类型() ...
- 2020-07-20:你觉得redis有什么缺点,给你改进的话你会怎么改进?
福哥答案2020-07-20: 1.由于 Redis 是内存数据库,短时间内大量增加数据,可能导致内存不够用.2.redis是单线程的,单台服务器无法充分利用多核服务器的CPU.3.遇到大量查询时容易 ...
- 一、常用的Dos命令
# 查看目录下所有文件 dir # 切换目录 cd cd .. //返回上一级 # 清理屏幕 cls # 查询电脑ip地址 ipconfig # 退出终端 exit # 创建文件夹 md test # ...