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

相关文章

  • Vue3自定义Hooks函数的使用详解

    Vue3自定义Hooks函数的使用详解

    vue3 中的 hooks 就是函数的一种写法,就是将文件的一些单独功能的js代码进行抽离出来进行封装使用,下面我们就来看看vue3中自定义Hooks函数的使用吧
    2023-09-09
  • vue登录页面回车执行事件@keyup.enter.native问题

    vue登录页面回车执行事件@keyup.enter.native问题

    这篇文章主要介绍了vue登录页面回车执行事件@keyup.enter.native问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • vue-video-player视频播放器使用配置详解

    vue-video-player视频播放器使用配置详解

    这篇文章主要为大家详细介绍了vue-video-player视频播放器的使用和配置,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-10-10
  • Vue中的.vue文件的使用方式

    Vue中的.vue文件的使用方式

    这篇文章主要介绍了Vue中的.vue文件的使用方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • 如何在vue里面优雅的解决跨域(路由冲突问题)

    如何在vue里面优雅的解决跨域(路由冲突问题)

    这篇文章主要介绍了如何在vue里面优雅的解决跨域(路由冲突问题),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • ant design vue的table取消自带分页问题

    ant design vue的table取消自带分页问题

    这篇文章主要介绍了ant design vue的table取消自带分页问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue 2.8.2版本配置刚进入时候的默认页面方法

    vue 2.8.2版本配置刚进入时候的默认页面方法

    今天小编就为大家分享一篇vue 2.8.2版本配置刚进入时候的默认页面方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue Echarts简易实现仪表盘

    Vue Echarts简易实现仪表盘

    这篇文章主要为大家详细介绍了Vue Echarts实现仪表盘案例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-12-12
  • vue3+pinia用户信息持久缓存token的问题解决

    vue3+pinia用户信息持久缓存token的问题解决

    本文主要介绍了vue3+pinia用户信息持久缓存token的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • Jenkins Sidebar Link插件实现添加侧边栏功能详解

    Jenkins Sidebar Link插件实现添加侧边栏功能详解

    这篇文章主要介绍了vue框架实现添加侧边栏,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12

最新评论