0
我在與陣列反應的問題,請參見下面的例子:https://jsfiddle.net/jk1kadxq/陣列反應問題
var app = new Vue({
el: "#app",
data: function() {
\t return {
\t grid: {
\t rows: [{}]
}
}
},
methods: {
\t addRow: function() {
\t this.grid.rows.push({});
},
setRow: function (row) {
\t console.log(row);
\t this.$set(row, 'cell', 'Test');
}
},
watch: {
\t 'grid.rows': {
deep: true,
handler: function (rows, oldRows) {
\t 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>
如果行尚未手動編輯,點擊「設置」按鈕將該字段設置爲「測試」,並且所有進一步的更新都在觀察者中捕捉。
如果某行先被手動編輯,則不會觸發觀察者,並且單擊「Set」按鈕不會立即更新該字段。添加另一行更新當前行。
有沒有不同的方式來添加新的數組成員?此頁面表示可以添加:https://vuejs.org/v2/guide/list.html