vue 如何在循環中綁定v-model
我現在有這么一個需求，頁面上有多項輸入框，但是具體有多少項，我也不知道，它是通過"新增一項"按鈕點擊事件，點擊一下，就新增一項；如下圖這個樣子；
代碼如下：
<ul class="list"> <li> <label>第1項</label> <input type="text" v-model="item1" /> </li> <li> <label>第2項</label> <input type="text" v-model="item2" /> </li> </ul> <button @click="newadd">新增一項</button>
我希望的是，如上代碼 v-model="item1", item2, 依次類推 ... item(n);
當我們點擊提交按鈕的時候，我們需要判斷input輸入框是否有值，沒有值的話，不允許提交等等這些操作。這些東西我們可以通過 v-model來判斷；
所以我當初的設計是想，想通過這樣循環來給v-model設置不同的值：
<li v-for="(item, index) in items"> <label>第{{index+1}}項</label> <input type="text" v-model="'item'+(index+1)" /> </li>
但是這樣弄，vue就會報錯了，或者v-model不生效等等這些問題的產生，它會直接把 item2等顯示在input輸入框內，所以這種方法目前還未想到解決的方法，但是我們可以換一種方式去考慮的。
最終方案是：
1. 首先在data里面定義如下字段：
data: { count: 1, arrs: [{'value': 1, 'customItem': ''}] },
count: 1, 含義是某一項是從1開始的。
arrs: [{'value': 1, 'customItem': ''}]， 含義是template內會循環這個數組 arrs, 頁面中默認有一項。
2. 然后每次新增的時候，會調用newadd方法：
newadd() { this.count++; this.arrs.push({'customItem': '', 'value': this.count}); },
其中 customItem 可以理解為 v-model的每一項值，因此在我們提交的時候，我們只需要循環數組 this.arrs來判斷第幾行輸入框input沒有值，就提示下用戶哪項沒有值了。
因此所有的代碼如下：
<!DOCTYPE html>
<html>
<head>
<title>演示Vue</title>
<style>
ul,li {list-style: none;}
.list {float: left; width:200px;}
button {float:left; margin-top:18px;}
</style>
</head>
<body>
<div id="app">
<div style="width:100%;overflow:hidden;">
<ul class="list">
<li v-for="(item, index) in arrs">
<label>第{{index+1}}項</label>
<input type="text" v-model="item.customItem" />
</li>
</ul>
<button @click="newadd">新增一項</button>
</div>
<div style="width:100%;margin-left:40px;overflow:hidden;">
<button @click="comfirm">提交</button>
</div>
</div>
</body>
<script src="./vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
count: 1,
arrs: [{'value': 1, 'customItem': ''}]
},
methods: {
newadd() {
this.count++;
this.arrs.push({'customItem': '', 'value': this.count});
},
comfirm() {
for (let i = 0; i < this.arrs.length; i++) {
var item = this.arrs[i];
if (!item.customItem) {
alert('第'+(i+1)+'項不能為空');
return;
}
}
}
}
})
</script>
</html>
注意：查看github效果的時候，可以新增幾項，然后可以留幾項不輸入任何值，直接點擊提交按鈕，會彈出第幾行輸入框的值沒有填寫了；我們也可以在控制台中打印出 this.arrs 的值。