element+vue2循环渲染v-model及附带rule规则遍历

业务需求：动态获取form表单内容，包括是否必填，双向绑定

解题思路：这个有经验的都知道，动态获取数据之后，直接v-for循环form-item就行了，v-model也可以直接绑定代码如下：

    <el-form-item
        v-for="item in dynamicFormList"
        :key="item.rpid + 'rsid'"
        :label="item.rpname + ':'"
        :prop="item.rpisrequired ? 'objList.' + item.rpid : false"
      >
        <div v-if="item.rpformType == 1">
          <el-popover
            v-if="item.rpdescription != ''"
            placement="right"
            width="400"
            trigger="hover"
            :content="item.rpdescription"
          >
            <el-input
              slot="reference"
              v-model="ruleForm.objList[item.rpid]"
              class="formWidthdpls"
              :placeholder="'请输入' + item.rpname"
            ></el-input>
          </el-popover>

          <el-input
            v-else
            v-model="ruleForm.objList[item.rpid]"
            class="formWidthdpls"
            :placeholder="'请输入' + item.rpname"
          ></el-input>
        </div>
        

重点在于v-model="ruleForm.objList[item.rpid]"，ruleForm.objList指的是在data里设置的数据，[item.rpid]的中括号代表是ruleForm.objList对象里的属性，因为是动态获取，我们事先不知道具体属性名，只能这样，规则调用的话，我这是先判断数据里是否需要，需要的话，添加2层级对象内容，因为提交的时候，后台需要动态数据整成一个对象返回去，所以我的ruleForm类似于这样：

    ruleForm: {
        title: "",
        imshowtype: "",
        standardno: "",
        aabstract: "",
        iscollect: 1,
        objList: {},
        // tag: "",
      },

获取动态数据代码如下：

      let form = {
        rSId: this.$route.query.RSID,
      };
      indexapi.Spectrogram.selectPaperResultsFrom(form).then((res) => {
        console.log(res);
        this.dynamicFormList = res.data;
        this.dynamicFormList.forEach((item) => {
          item.rpid = "name" + item.rpid;
          let form = {
            required: true,
            message: "请输入" + item.rpname,
            trigger: "blur",
          };
          this.rules.objList[item.rpid] = new Array();
          this.rules.objList[item.rpid].push(form);
          this.ruleForm.objList[item.rpid]=''
        });

不需要的朋友可以不关注这块，ok这样一顿操作之后，感觉上应该可以执行了，但是执行之后发现遍历的动态form表单不能输入，也不能选择，这就纳闷了，检查代码，看着逻辑也没啥问题，把我纳闷了。这时候聪明的人肯定能想到是什么原因，对就是没有后来赋给data里的数据不是响应式的，这是vue2的绑定限制，这个以前记的特别清，前段时间一直做vue3，忘了这个存在了，大意了，写下这个例子，给自己长个记性，也提醒大家，不要写了新技术就忘了之前的。正确获取数据并响应绑定数据代码如下：

      let form = {
        rSId: this.$route.query.RSID,
      };
      indexapi.Spectrogram.selectPaperResultsFrom(form).then((res) => {
        console.log(res);
        this.dynamicFormList = res.data;
        this.dynamicFormList.forEach((item) => {
          item.rpid = "name" + item.rpid;
          let form = {
            required: true,
            message: "请输入" + item.rpname,
            trigger: "blur",
          };
          this.rules.objList[item.rpid] = new Array();
          this.rules.objList[item.rpid].push(form);
          // this.ruleForm.objList[item.rpid]=''
          this.$set(this.ruleForm.objList, item.rpid, "");
        });