vue 数组中嵌套的对象添加新属性--视图数据不更新问题

vue 数组中嵌套的对象添加新属性–视图更新问题

我们知道vue属于MVVM框架，数据操作视图。对data对象中的数据进行监听，当侦测到数据改变时相应数据所影响的页面也会触发更新。所以我们所需要的这些响应式数据，受到javascript的限制，vue不能检测到对象属性的添加或删除，因为Vue利用的是Object的defineProperty()方法，在初始化实列时将属性转为getter/setter，所以属性必须在data对象上才能让vue转换它。
当然这只是一般的属性，以一般字符串，数字，布尔值这样的基本数据类型作为属性值的响应，当然我们有时候的诉求的初始化属性的属性值不只有这样的基本数据变量，我们还会用到数组，对象这样的引用数据变量。引用数据变量就是对地址的引用，只是对象的指针发生变化，并没有重新生成一个对象

vue在这种情况下给我们提供了$set这种响应式方法去操作页面更新

需要为以下数组中的每个对象添加一个select属性

  [
        {
          name: '第1行',
          textShow: true,
          text: ''
        },
         {
          name: '第2行',
          textShow: true,
          text: ''
        },
         {
          name: '第3行',
          textShow: true,
          text: ''
        },
         {
          name: '第4行',
          textShow: true,
          text: ''
       }
 ]

实现方式如下

直接赋值

	this.arr.forEach(item => {
     	this.$set(item, 'showEditBtn', true)
	})

我们考虑一下，对象没有变化我们没有更新页面，单纯的等号赋值只是引用地址的变化，本身不等于数组的变化，那我们让他的数组真正变化（重新创建不就可以了），我们利用Object. assign()去进行浅拷贝对象。

通过深浅拷贝

	this.arr.forEach(item => {
      item.showEditBtn = true;
    })
    this.arr = Object.assign({},this.arr)

参照 ：简书 - peakol