vue实例中的data中的值,无法更新视图

最近在研究vue.js(2.0+),然而遇到一个大炕

描述:电商中,增加数量至购物车按钮:

1,axios请求数据,并通过$set(target,key,value),赋值给实例data的productList属性

2,页面中v-for绑定每个商品,并且,将数量默认给0

等等,这个问题就来了,如何将数量默认给个0,这个购买的数量值该怎么存,由于刚开始用vue,我只能想到,将请求过来的数response.data,动态添加一个属性"pro_num",于是乎,我就在axios中为数据productList循环添加了一个属性——pro_num。

axios.get('json/productList.json')
  .then(function(response) {
    //将请求的数据赋值给data.productList
    _this.$set(_this.$data, 'productList', response.data);
   

    //为productList动态添加数据
    _this.$data.productList.data.map(function(item, index) {
item["pro_num"] = 0
    });

})
.catch(function(response) {
    console.log(response);
});

结果,页面也正常输出,可是当我点“添加”(添加商品至购物车)时,后台发现data.productList.data[0].pro_num值发生变化了,但是,页面中的值却没有发生变化,什么鬼!!!

后来仔细看了官网才知道,以下为官网说明:

当这些数据改变时,视图会进行重渲染。值得注意的是只有当实例被创建时 data 中存在的属性是响应式的。也就是说如果你添加一个新的属性,像:

     
     
vm.b = 'hi'

那么对 b 的改动将不会触发任何视图的更新。如果你知道你会在晚些时候需要一个属性,但是一开始它为空或不存在,那么你仅需要设置一些初始值。

解释:也就是说,data中的数据,要么最开始赋值的时候就是完整的,要么你想要动态添加,如果不借助点啥方法,是不会为你更新视图的,好诡异。

解决方案:

1.在最开始赋值给data.productList前,就修改response.data数据,如下:

axios.get('json/productList.json')
  .then(function(response) {

    //选修改【源数据项】

response.data.data.map(function(item) {
item.pro_num = 0;
});

    //将请求的数据赋值给data.productList
    _this.$set(_this.$data, 'productList', response.data);

})
.catch(function(response) {
    console.log(response);
});


2.动态添加data实例属性结构

axios.get('json/productList.json')
.then(function(response) {

/*response.data.data.map(function(item) {
item.pro_num = 0;
});*/

_this.$set(_this.$data, 'productList', response.data);

_this.$data.productList.data.map(function(item,index){
//item["pro_num"]=0
_this.$set(item,"pro_num",0);
})

})
.catch(function(response) {
console.log(response);
});

以上,就是初学的我遇到的大坑之一,望给需要者一个解决方法,由于本人刚接触vue,大神勿喷

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值