vue 数据更新 视图不刷新

问题描述:

 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中 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值