2017-08-04 39 views
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>

  1. 如果行尚未手動編輯,點擊「設置」按鈕將該字段設置爲「測試」,並且所有進一步的更新都在觀察者中捕捉。

  2. 如果某行先被手動編輯,則不會觸發觀察者,並且單擊「Set」按鈕不會立即更新該字段。添加另一行更新當前行。

有沒有不同的方式來添加新的數組成員?此頁面表示可以添加:https://vuejs.org/v2/guide/list.html

回答

0

我已經找到了問題...對象的所有屬性都應該初始化。

所以在我的情況下,添加一行的正確方法是:this.grid.rows.push({cell: ''});

這將是很好,雖然綁定控件時,如果尚未初始化初始化對象的屬性。