动态生成v-model时不能直接使用string[‘name’]=value，无法编辑，这时需要使用this.$set
<el-form>//form的配置自行填入 <el-form-item v-for="(item, index) in inputList" :key="index" :label="'任务'+(index+1)" > <div style="display:flex"> <el-input style="width:250px" v-model="query['data'+index]"></el-input> <i size="medium" @click="addInput" v-if="index==inputList.length-1" class="el-icon-circle-plus-outline add-icon" ></i> <i size="medium" @click="delInput(index)" v-if="index==inputList.length-1&&index!=0" class="el-icon-circle-close cancel-icon" ></i> </div> </el-form-item> </el-form>js部分
handlebars data() { return { query: {}, inputList: [1] }; }, methods(){ //添加input事件 addInput() { this.inputList.push(1); }, //删除input，并清除input的值 delInput(index) { this.inputList.pop(1); delete this.query["data" + index]; }, //提交表单时取值 submit(){ Object.keys(this.query).forEach((item, index) => { if (this.query[item] != "") { a.push({ content: that.query[item] }); } }); } }思路：遍历的次数即输入框的数目，inputList就是存储输入框的数目，增加inputList的数组长度即增加输入框的数目，减去亦如此
效果图 动态生成双向数据绑定时遇到的坑： 如果是动态生成多条数据和输入框，并填入数据，不能直接使用string[‘name’]=value，否则无法编辑，这时需要使用this.$set
//arr为输入框的数据，它的长度即输入框的数目 for (var i = 0, len = arr.length; i < len; i++) { this.inputList.push(i); this.$set(this.query, "data" + i, arr[i]); }