vue动态生成表单输入框,并动态生成v-model(动态生成v-model遇到的坑)
动态生成v-model时不能直接使用string[‘name’]=value,无法编辑,这时需要使用this.$set
动态生成v-model时不能直接使用string[‘name’]=value,无法编辑,这时需要使用this. s e t 原 因 : v u e 2. x 版 本 双 向 数 据 的 劫 持 是 使 用 o b j e c t . d e f i n e P r o p e r t y 的 , 对 于 对 象 里 面 新 增 的 字 段 或 属 性 是 无 法 进 行 双 向 绑 定 的 , 必 须 通 过 set 原因:vue2.x版本双向数据的劫持是使用object.defineProperty的,对于对象里面新增的字段或属性是无法进行双向绑定的,必须通过 set原因:vue2.x版本双向数据的劫持是使用object.defineProperty的,对于对象里面新增的字段或属性是无法进行双向绑定的,必须通过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]);
}
更多推荐
所有评论(0)