动态生成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的,对于对象里面新增的字段或属性是无法进行双向绑定的,必须通过 setvue2.x使object.definePropertyset重新绑定。

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

前往低代码交流专区

更多推荐