动态添加输入框

vue代码部分：

<el-form-item label="备注:">

<el-input type="textarea" v-model="addAccessoriesInfo.remark" placeholder="请输入备注" autocomplete="off"></el-input>

<div class="addEntry" @click="addEntryInfo='';dialogAddEntry = true"><i class="el-icon-plus"></i>添加录入项</div>

</el-form-item>

js代码部分：

// 录入项，label

addEntryOK() {

if(!this.addEntryInfo){

return this.$message.error('请输入录入项名称')

}

if (this.addEntryArr.length < 5) {

this.addEntryArr.push({

label: this.addEntryInfo,

value: ''

});

} else {

this.$message.error('自定义的录入项不得超过5个')

}

console.log("新添加的数据", this.addEntryArr);

this.dialogAddEntry = false;

}

 

//组成数据

let obj = {}

this.addEntryArr.filter((i, idx) => {

obj[`mountingExtends${(idx != 0 ? idx+1 : '')}`] = i

})

console.log(obj);

data={

...obj

}

 

控制台显示：