當一個陣列是原始結構,例:[1,2,3,4,5]
若新增一個項目進去時,一般在html上,v-model會直接綁定那個項目的值,如以下程式
<td v-for="item in list">
<input type="text" v-model="item" />
</td>
但這樣,在新增項目的input上改變值時,會沒辦法binding到vue值。
這時解決的方式如下,將程式加入index,v-model直接綁定到陣列的索引值,這樣就能改變vue的值
<td v-for="(item, index) in list">
<input type="text" v-model="list[index]" />
</td>
PS. 若是陣列裡面是物件的結構,使用v-model可直接綁定物件的key值
例:[
{
name: "中文",
value: 1
},
{
name: "英文",
value: 2
},
{
name: "日文",
value: 3
},
]
<td v-for="item in list">
<input type="text" v-model="item.name" />
</td>