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.arrs.push({'customItem': '', 'value': unt});
},
其中 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 >
<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 >
<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.arrs.push({'customItem': '', 'value': unt});
},
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 的值。
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议