阵列反应性问题答案

【问题标题】：Array Reactivity Issues阵列反应性问题
【发布时间】：2018-01-12 23:45:51
【问题描述】：

我遇到了数组反应性问题，请参阅此示例：https://jsfiddle.net/jk1kadxq/

var app = new Vue({
  el: "#app",
  data: function () {
  	return {
    	grid: {
      	rows: [{}]
      }
    }
  },
  methods: {
  	addRow: function () {
    	this.grid.rows.push({});
    },
    setRow: function (row) {
    	console.log(row);
    	this.$set(row, 'cell', 'Test');
    }
  },
  watch: {
  	'grid.rows': {
      deep: true,
      handler: function (rows, oldRows) {
      	console.log('Rows updated', rows, oldRows);
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<div id="app">
  <table>
    <tr v-for="row in grid.rows">
      <td><input type="text" v-model="row.cell"></td>
      <td><button type="button" @click="setRow(row)">Set</button></td>
    </tr>
  </table>
  <button type="button" @click="addRow">Add</button>
</div>

如果没有手动编辑行，单击“设置”按钮会将字段设置为“测试”，并且对其的所有进一步更新都会在观察程序中捕获。
如果先手动编辑了一行，则不会触发观察者，并且单击“设置”按钮不会立即更新该字段。添加另一行会更新当前行。

有没有不同的方法来添加新的数组成员？这个页面说可以添加：https://vuejs.org/v2/guide/list.html

【问题讨论】：

标签： vue.js vuejs2

【解决方案1】：

我已经解决了这个问题...对象的所有属性都应该被初始化。

所以就我而言，添加行的正确方法是：this.grid.rows.push({cell: ''});

在绑定到控件时初始化对象属性会很好，如果还没有初始化的话。

【讨论】：