使用vue-resource进行数据交互的实例


Posted in Javascript onSeptember 02, 2017

一.使用vue-resource插件进行数据交互式,返回的并不是直接的json数据,其实还封装了一层。

如下代码:直接使用 res.result.list 取不到数据。

methods:{
  cartview:function(){
   var _this = this;
   this.$http.get("data/cartData.json").then(function(res){
    _this.productList = res.result.list;
    _this.totalMoney = res.result.totalMaoney;
   });
  }
 }

错误信息如下:

使用vue-resource进行数据交互的实例

这时进行断点调试:

F12 打开chrome浏览器控制台——ctrl+p ——查找相应的代码文件(car.js 即上面那段代码所在的文件。)——在19行打断点——刷新——鼠标移到res,可以看到整个封装好的结构,这里我们看到result实际上是在data里面。

使用vue-resource进行数据交互的实例

使用vue-resource进行数据交互的实例

使用vue-resource进行数据交互的实例

所以正确获取数据的代码如下:

methods:{
  cartview:function(){
   var _this = this;
   this.$http.get("data/cartData.json").then(function(res){
    _this.productList = res.data.result.list;
    _this.totalMoney = res.data.result.totalMaoney;
   });
  }
 }

json文件结构如如下

{
 "status":1,
 "result":{
 "totalMoney":109,
 "list":[
  {
  "productId":"600100002115",
  "productName":"黄鹤楼香烟",
  "productPrice":19,
  "productQuantity":1,
  "productImage":"img/goods-1.jpg",
  "parts":[
   {
   "partsId":"10001",
   "partsName":"打火机",
   "imgSrc":"img/part-1.jpg"
   },
   {
   "partsId":"10002",
   "partsName":"打火机",
   "imgSrc":"img/part-1.jpg"
   }
  ]
  },
  {
  "productId":"600100002120",
  "productName":"加多宝",
  "productPrice":8,
  "productQuantity":5,
  "productImage":"img/goods-2.jpg",
  "parts":[
   {
   "partsId":"20001",
   "partsName":"吸管",
   "imgSrc":"img/part-2.jpg"
   }
  ]
  },
  {
  "productId":"600100002117",
  "productName":"金装黄鹤楼",
  "productPrice":25,
  "productQuantity":2,
  "productImage":"img/goods-1.jpg",
  "parts":[
   {
   "partsId":"10001",
   "partsName":"打火机-1",
   "imgSrc":"img/part-1.jpg"
   },
   {
   "partsId":"10002",
   "partsName":"打火机-2",
   "imgSrc":"img/part-1.jpg"
   }
  ]
  }
 ]
 },
 "message":""

以上这篇使用vue-resource进行数据交互的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
为jQuery.Treeview添加右键菜单的实现代码
Oct 22 Javascript
juqery 学习之四 筛选查找
Nov 30 Javascript
js获取GridView中行数据的两种方法 分享
Jul 13 Javascript
jquery中选择块并改变属性值的方法
Jul 31 Javascript
使用jQuery实现验证上传图片的格式与大小
Dec 03 Javascript
javascript实现鼠标移到Image上方时显示文字效果的方法
Aug 07 Javascript
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
Jun 05 Javascript
js 简易版滚动条实例(适用于移动端H5开发)
Jun 26 Javascript
JS函数节流和函数防抖问题分析
Dec 18 Javascript
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
Dec 19 Javascript
Vue插值、表达式、分隔符、指令知识小结
Oct 12 Javascript
layui扩展上传组件模拟进度条的方法
Sep 23 Javascript
jquery tmpl模板(实例讲解)
Sep 02 #jQuery
自制简易打赏功能的实例
Sep 02 #Javascript
Vue使用vue-cli创建项目
Sep 01 #Javascript
vue 里面使用axios 和封装的示例代码
Sep 01 #Javascript
ionic2懒加载配置详解
Sep 01 #Javascript
javascript 中事件冒泡和事件捕获机制的详解
Sep 01 #Javascript
Vue的Class与Style绑定的方法
Sep 01 #Javascript
You might like
PHP高自定义性安全验证码代码
2011/11/27 PHP
使用php+apc实现上传进度条且在IE7下不显示的问题解决方法
2013/04/25 PHP
php的webservice的wsdl的XML无法显示问题的解决方法
2014/03/11 PHP
又一个PHP实现的冒泡排序算法分享
2014/08/21 PHP
destoon实现不同会员组公司名称显示不同的颜色的方法
2014/08/22 PHP
PHP面向对象程序设计(OOP)之方法重写(override)操作示例
2018/12/21 PHP
javascript 匿名函数的理解(透彻版)
2010/01/28 Javascript
javascript 文本框水印/占位符(watermark/placeholder)实现方法
2012/01/15 Javascript
jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)
2013/02/04 Javascript
『jQuery』取指定url格式及分割函数应用
2013/04/22 Javascript
js整数字符串转换为金额类型数据(示例代码)
2013/12/26 Javascript
jQuery实现感应鼠标动画效果自动伸长的输入框实例
2015/02/24 Javascript
jsTree使用记录实例
2016/12/01 Javascript
简单实现JS上传图片预览功能
2017/04/14 Javascript
详解vue-router 路由元信息
2017/09/13 Javascript
vue跨域解决方法
2017/10/15 Javascript
最实用的JS数组函数整理
2017/12/05 Javascript
如何基于js判断浏览器版本
2020/02/20 Javascript
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
[03:48]2014DOTA2 TI专访71DK夺冠不靠小组赛高排名
2014/07/11 DOTA
本地文件上传到七牛云服务器示例(七牛云存储)
2014/01/11 Python
Python 实现文件的全备份和差异备份详解
2016/12/27 Python
Python实现的归并排序算法示例
2017/11/21 Python
浅析Python3爬虫登录模拟
2018/02/07 Python
详解Django中类视图使用装饰器的方式
2018/08/12 Python
python得到qq句柄,并显示在前台的方法
2018/10/14 Python
浅析python表达式4+0.5值的数据类型
2020/02/26 Python
西安夏日科技有限公司Java笔试题
2013/01/11 面试题
就业推荐表自我鉴定
2013/10/29 职场文书
自我鉴定总结
2014/03/24 职场文书
关于奉献的演讲稿
2014/05/21 职场文书
奉献家乡演讲稿
2014/09/13 职场文书
2015年干部教育培训工作总结
2015/05/15 职场文书
文化苦旅读书笔记
2015/06/29 职场文书
pytorch model.cuda()花费时间很长的解决
2021/06/01 Python
Redis集群的关闭与重启操作
2021/07/07 Redis