vue动态生成表单输入框，并动态生成v-model（动态生成v-model遇到的坑）

最新推荐文章于 2023-09-10 01:31:19 发布

小陆pro

最新推荐文章于 2023-09-10 01:31:19 发布

阅读量8.8k

点赞数 8

文章标签：动态表单 vue.js

本文链接：https://blog.csdn.net/weixin_41308436/article/details/107083638

版权

动态生成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重新绑定。

  <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]);
      }