阵列反应性问题

Posted 2023-02-23

【中文标题】阵列反应性问题

【英文标题】：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

【参考方案1】：

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

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

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