每一行有一个input和一个select,其中行数是根据服务器返回的json数据动态变化的。那么问题来了，我们要怎样动态生成v-model？
<template>
<div>
<div class="line" v-for="(item,index) in dataModel">
<input type="text" v-model="dataModel[index].value1" />
<span>{{dataModel[index].value1}}</span>
<button v-bind:data-index="index" v-on:click="submitClick">提交</button> <input type="text" v-model="dataModel[index].value2" />
<span>{{dataModel[index].value2}}</span>
</div>
</div>
</template> <script>
export default {
data() {
return {
dataModel: []
}
},
created(){
// 这里是动态生成v-model,这个可以放在网络请求成功里面;
var len = 4;
for (var i = 0; i < len; i++) {
var item = {value1: ''};
this.dataModel.push(item);
} },
methods:{
// 显示v-model里面的数据
submitClick: function(event){
var tag = event.target;
var index = tag.getAttribute('data-index');
alert(this.dataModel[index].value1);
console.log(this.dataModel)
} }
}
</script>
欢迎加入大前端交流群！群号：277942610，新建立VIP新群