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

 更新时间:2017年09月02日 09:32:54   作者:逻辑左移喔  
下面小编就为大家带来一篇使用vue-resource进行数据交互的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

一.使用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;
   });
  }
 }

错误信息如下:

这时进行断点调试:

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

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

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进行数据交互的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 结合el-upload组件实现大文件分片上传功能

    结合el-upload组件实现大文件分片上传功能

    Element UI的el-upload上传组件相信各位小伙伴都已经非常熟悉,最近接了一个新需求,要求在el-upload组件基础上实现分片上传功能,即小于等于5M文件正常上传,大于5M文件切成5M每片上传,那么这个功能怎么实现呢?一起看看吧
    2022-09-09
  • vue3中项目优化方法详解(Web Worker的使用)

    vue3中项目优化方法详解(Web Worker的使用)

    最近在做vue3的项目中,遇到了计算量庞大导致页面响应缓慢的问题,所以下面这篇文章主要给大家介绍了关于vue3中项目优化方法的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-07-07
  • vue 监听 Treeselect 选择项的改变操作

    vue 监听 Treeselect 选择项的改变操作

    这篇文章主要介绍了vue 监听 Treeselect 选择项的改变操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue-editor-bridge报错的解决方案

    vue-editor-bridge报错的解决方案

    这篇文章主要介绍了vue-editor-bridge报错的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue引用Swiper4插件无法重写分页器样式的解决方法

    Vue引用Swiper4插件无法重写分页器样式的解决方法

    今天小编就为大家分享一篇Vue引用Swiper4插件无法重写分页器样式的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue的指令和插值总结(非常详细)

    vue的指令和插值总结(非常详细)

    这篇文章主要给大家介绍了关于vue指令和插值的相关资料,大家应该对指令和插值都不陌生,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-06-06
  • 关于vue里页面的缓存详解

    关于vue里页面的缓存详解

    今天小编就为大家分享一篇关于vue里页面的缓存详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • 面试官问你Vue2的响应式原理该如何回答?

    面试官问你Vue2的响应式原理该如何回答?

    可能很多小伙伴之前都了解过 Vue2实现响应式的核心是利用了ES5的Object.defineProperty 但是面对面试官时如果只知道一些模糊的概念。只有深入底层了解响应式的原理,才能在关键时刻对答如流,本文就来和大家详细聊聊,感兴趣的可以收藏一下
    2022-12-12
  • vue.js管理后台table组件封装的方法

    vue.js管理后台table组件封装的方法

    table作为数据展示组件,在日常开发中经常被用到,这篇文章主要给大家介绍了关于vue.js管理后台table组件封装的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2021-08-08
  • 使用Vue简单实现一个上拉加载更多分页组件

    使用Vue简单实现一个上拉加载更多分页组件

    上拉加载更多的分页功能大家应该都见过或者使用过了吧,那么有多少同学自己实现过吗,本文我们来简单实现一个上拉加载更多分页组件吧
    2024-11-11

最新评论