使用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 相关文章推荐
javascript 设置某DIV区域内的checkbox复选框
Nov 30 Javascript
WEB 浏览器兼容 推荐收藏
May 14 Javascript
Jquery从头学起第四讲 jquery入门教程
Aug 01 Javascript
jQuery JSON实现无刷新三级联动实例探讨
May 28 Javascript
jQuery实现拖动调整表格单元格大小的代码实例
Jan 13 Javascript
bootstrap日历插件datetimepicker使用方法
Dec 14 Javascript
详解Node.js利用node-git-server快速搭建git服务器
Sep 27 Javascript
vue操作下拉选择器获取选择的数据的id方法
Aug 24 Javascript
微信小程序自定义tabBar组件开发详解
Sep 24 Javascript
vue实现百度搜索功能
Dec 28 Javascript
JavaScript实现飞舞的泡泡效果
Feb 07 Javascript
Vue循环遍历选项赋值到对应控件的实现方法
Jun 22 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 调试利器debug_print_backtrace()
2012/07/23 PHP
php实现httpclient类示例
2014/04/08 PHP
javascript 写类方式之十
2009/07/05 Javascript
传智播客学习之JavaScript基础篇
2009/11/13 Javascript
最短的javascript:地址栏载入脚本代码
2011/10/13 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
2013/01/23 Javascript
JS 删除字符串最后一个字符的实现代码
2014/02/20 Javascript
js设置function参数默认值(适合没有传参情况)
2014/02/24 Javascript
node.js中的fs.readFileSync方法使用说明
2014/12/15 Javascript
JS+CSS3制作炫酷的弹窗效果
2016/11/08 Javascript
JS 对java返回的json格式的数据处理方法
2016/12/05 Javascript
详解jQuery的表单验证插件--Validation
2016/12/21 Javascript
微信小程序使用radio显示单选项功能【附源码下载】
2017/12/11 Javascript
VueAwesomeSwiper在VUE中的使用以及遇到的一些问题
2018/01/11 Javascript
JavaScript禁用右键单击优缺点分析
2019/01/20 Javascript
详解vue几种主动刷新的方法总结
2019/02/19 Javascript
vue.js中使用echarts实现数据动态刷新功能
2019/04/16 Javascript
ajaxfileupload.js实现上传文件功能
2019/04/19 Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
2019/05/28 Javascript
layui富文本编辑器前端无法取值的解决方法
2019/09/18 Javascript
jQuery轮播图功能制作方法详解
2019/12/03 jQuery
JQuery中的常用事件、对象属性与使用方法分析
2019/12/23 jQuery
Vue中关闭弹窗组件时销毁并隐藏操作
2020/09/01 Javascript
简单介绍Ruby中的CGI编程
2015/04/10 Python
python实现JAVA源代码从ANSI到UTF-8的批量转换方法
2015/08/10 Python
24式加速你的Python(小结)
2019/06/13 Python
Python类反射机制使用实例解析
2019/12/30 Python
如何用 Python 制作 GitHub 消息助手
2021/02/20 Python
详解如何使用CSS3中的结构伪类选择器和伪元素选择器
2020/01/06 HTML / CSS
Staples美国官方网站:办公用品一站式采购
2016/07/28 全球购物
服务中心夜班服务员岗位职责
2013/11/27 职场文书
硕士学位论文评语
2014/12/31 职场文书
机关干部纪律作风整顿心得体会
2016/01/23 职场文书
教你怎么用Python生成九宫格照片
2021/05/20 Python
使用javascript解析二维码的三种方式
2021/11/11 Javascript
windows11选中自动复制怎么开启? Win11自动复制所选内容的方法
2022/07/23 数码科技