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，大神勿喷