入门客AI创业平台(我带你入门,你带我飞行)
博文笔记

vue 数据更新 视图不刷新

创建时间:2017-05-05 投稿人: 浏览次数:4794

问题描述:

 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中 
声明:该文观点仅代表作者本人,入门客AI创业平台信息发布平台仅提供信息存储空间服务,如有疑问请联系rumenke@qq.com。