问题描述:
data () {
return {
goods:
0,
dataGoods:[
{id:
1,title:
'1',imgsrc:
'./src/img/timg1.jpg',price:
10.00},
{id:
2,title:
'2',imgsrc:
'./src/img/timg2.jpg',price:
20.02},
{id:
3,title:
'3',imgsrc:
'./src/img/timg3.jpg',price:
30.09},
{id:
4,title:
'4',imgsrc:
'./src/img/timg1.jpg',price:
40.40},
{id:
5,title:
'1',imgsrc:
'./src/img/timg3.jpg',price:
50.70},
{id:
6,title:
'2',imgsrc:
'./src/img/timg2.jpg',price:
60.65},
{id:
7,title:
'3',imgsrc:
'./src/img/timg1.jpg',price:
70.43},
{id:
8,title:
'4',imgsrc:
'./src/img/timg2.jpg',price:
80.66},
],
shopcart:[
{id:
11,title:
'烟台大樱桃 大樱桃,也称西洋樱桃,南方区域一般称为“车厘子”',price:
10.00,number:
1},
{id:
12,title:
'商品1',price:
10.01,number:
2},
{id:
13,title:
'商品2',price:
21.44,number:
1},
{id:
14,title:
'商品3',price:
25.78,number:
1},
{id:
15,title:
'商品4',price:
1.88,number:
1},
{id:
16,title:
'商品5',price:
108.09,number:
1},
]
}
}
将dataGoods 的数据添加到shopcart 浅赋值dadaGoods的数据,然后添加 numer 属性shopcart shopcart 添加新数据的时候可以刷新视图,但是不能后面对number的update 不能更新视图 即 vue 不能监听新添数据后的update;
原因:
浅复制数据不能被shopcart的数据监听,属于引用状态,虽然shopcart 内的数据更新了但是更新dataGoods的数据
解决方案
对**dataGoods**的数据深复制后再添加带shopcart中