使用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 相关文章推荐
页面版文本框智能提示JS代码
Nov 20 Javascript
js 禁用只读文本框获得焦点时的退格键
Apr 25 Javascript
File, FileReader 和 Ajax 文件上传实例分析(php)
Apr 27 Javascript
利用JS自动打开页面上链接的实现代码
Sep 25 Javascript
jquery修改属性值实例代码(设置属性值)
Jan 06 Javascript
jquery实现可关闭的倒计时广告特效代码
Sep 02 Javascript
Javascript中作用域的详细介绍
Oct 06 Javascript
详解vue.js的devtools安装
May 26 Javascript
vue2中filter()的实现代码
Jul 09 Javascript
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
Feb 10 Javascript
手写Node静态资源服务器的实现方法
Mar 20 Javascript
微信小程序实现电子签名功能
Jul 29 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实现ping
2006/10/09 PHP
PHP Zip压缩 在线对文件进行压缩的函数
2010/05/26 PHP
PHP读MYSQL中文乱码的快速解决方法
2016/10/01 PHP
php pdo操作数据库示例
2017/03/10 PHP
php回调函数处理数组操作示例
2020/04/13 PHP
[原创]提供复制本站内容时出现,该文章转自脚本之家等字样的js代码
2007/03/27 Javascript
通过修改referer下载文件的方法
2008/05/11 Javascript
javascript instanceof,typeof的区别
2010/03/24 Javascript
js的逻辑运算符 ||
2010/05/31 Javascript
JSONP 跨域访问代理API-yahooapis实现代码
2012/12/02 Javascript
javascript中验证大写字母、数字和中文
2014/01/15 Javascript
jquery五角星评分插件示例分享
2014/02/21 Javascript
使用jQuery实现星级评分代码分享
2014/12/09 Javascript
js实现左侧网页tab滑动门效果代码
2015/09/06 Javascript
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
2017/10/19 Javascript
微信小程序中使用ECharts 异步加载数据的方法
2018/06/27 Javascript
Vue项目中使用jsonp抓取跨域数据的方法
2019/11/10 Javascript
12 种使用Vue 的最佳做法
2020/03/30 Javascript
Vue实现腾讯云点播视频上传功能的实现代码
2020/08/17 Javascript
Express 配置HTML页面访问的实现
2020/11/01 Javascript
用Python编程实现语音控制电脑
2014/04/01 Python
python网络编程学习笔记(四):域名系统
2014/06/09 Python
以Flask为例讲解Python的框架的使用方法
2015/04/29 Python
Python中http请求方法库汇总
2016/01/06 Python
从局部变量和全局变量开始全面解析Python中变量的作用域
2016/06/16 Python
pandas Dataframe行列读取的实例
2018/06/08 Python
python 利用浏览器 Cookie 模拟登录的用户访问知乎的方法
2019/07/11 Python
关于python字符串方法分类详解
2019/08/20 Python
Scrapy 配置动态代理IP的实现
2020/09/28 Python
低碳环保演讲稿
2014/08/28 职场文书
就业协议书怎么填
2014/09/15 职场文书
毕业生自荐信范文
2015/03/05 职场文书
2015年社区统计工作总结
2015/04/21 职场文书
幼儿园辞职信
2015/05/13 职场文书
Web前端:CSS最强总结 附详细代码
2021/03/31 HTML / CSS
Python WSGI 规范简介
2021/04/11 Python