vue下的@change事件的实现

问题1:
根据请求获取后端数据进行级联下拉菜单的渲染,一直报错 loop
第一个是因为我把@change写在了option中

问题2:
还有一个问题是一直报 name undefined,将change事件修改后就可以了

级联菜单实现的思路是:
当第一个下拉菜单改变时(change),获取第二个下拉菜单的值

调用change方法的时候，它有个默认的参数val，就是下拉框的值

<el-form ref="fillFormRef" :model="fillForm" :rules="fillRules" label-width="200px">
          <el-form-item label="单位名称" prop="enterproseName">
            <el-select v-model="fillForm.enterproseName" placeholder="请选择单位名称" @change="changeCompany">
              <el-option v-for="item in lists" :key="item.companyName" :label="item.companyName" :value="item.companyName">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="合同条件" prop="clauseName">
            <el-select v-model="fillForm.clauseName" placeholder="请选择合同条件">
              <el-option v-for="item in lists1" :key="item.name" :label="item.name" :value="`${item.name}|${item.value}`">
              </el-option>
            </el-select>
          </el-form-item>
 </el-form>

changeCompany(val) {
      this.lists1 = [];
      Object.keys(this.lists).forEach((index) => {
        if (this.lists[index].companyName === val) {
          if (this.lists[index].payAgreements != null) {
            this.lists1 = JSON.parse(this.lists[index].payAgreements);
            this.fillForm.conditionsContractUuid = this.lists[index].uuid;
          }
        }
      });
      // this.selectData.forEach((item, index) => {
      //     if (item.companyName == this.fillForm.enterproseName) {
      //         this.lists1 = JSON.parse(item.payAgreements);
      //     }
      // });
    },

参考链接:https://www.jb51.net/article/172817.htm