您的位置：首页 > 产品设计 > UI/UE

使用vue-resource进行数据交互

2017-09-02 10:05 906 查看
一.使用vue-resource插件进行数据交互式，返回的并不是直接的json数据，其实还封装了一层。

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

1 methods:{
2         cartview:function(){
3             var _this = this;
4             this.$http.get("data/cartData.json").then(function(res){
5                 _this.productList = res.result.list;
6                 _this.totalMoney = res.result.totalMaoney;
7             });
8         }
9     }


错误信息如下：



 

这时进行断点调试：

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







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

1 methods:{
2         cartview:function(){
3             var _this = this;
4             this.$http.get("data/cartData.json").then(function(res){
5                 _this.productList = res.data.result.list;
6                 _this.totalMoney = res.data.result.totalMaoney;
7             });
8         }
9     }


 

json文件结构如如下;

1 {
2   "status":1,
3   "result":{
4     "totalMoney":109,
5     "list":[
6       {
7         "productId":"600100002115",
8         "productName":"黄鹤楼香烟",
9         "productPrice":19,
10         "productQuantity":1,
11         "productImage":"img/goods-1.jpg",
12         "par
4000
ts":[
13           {
14             "partsId":"10001",
15             "partsName":"打火机",
16             "imgSrc":"img/part-1.jpg"
17           },
18           {
19             "partsId":"10002",
20             "partsName":"打火机",
21             "imgSrc":"img/part-1.jpg"
22           }
23         ]
24       },
25       {
26         "productId":"600100002120",
27         "productName":"加多宝",
28         "productPrice":8,
29         "productQuantity":5,
30         "productImage":"img/goods-2.jpg",
31         "parts":[
32           {
33             "partsId":"20001",
34             "partsName":"吸管",
35             "imgSrc":"img/part-2.jpg"
36           }
37         ]
38       },
39       {
40         "productId":"600100002117",
41         "productName":"金装黄鹤楼",
42         "productPrice":25,
43         "productQuantity":2,
44         "productImage":"img/goods-1.jpg",
45         "parts":[
46           {
47             "partsId":"10001",
48             "partsName":"打火机-1",
49             "imgSrc":"img/part-1.jpg"
50           },
51           {
52             "partsId":"10002",
53             "partsName":"打火机-2",
54             "imgSrc":"img/part-1.jpg"
55           }
56         ]
57       }
58     ]
59   },
60   "message":""


 
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航