Vue element-ui 表单中下拉框遇到的BUG

先看下代码，下拉框中的值是动态属性，

<el-form :model="addCaseForm" :rules="addCaseRules" ref="addCasesRef" label-width="100px">
          <el-form-item label="所在项目" prop="selected_value">
              <el-select v-model="selected_value" placeholder="请选择项目">
                  <el-option
                      v-for="item in projectsList"
                      :key="item.id"
                      :label="item.project_name"
                      :value="item.id">
                  </el-option>
              </el-select>
          </el-form-item>
</el-form>

验证规则的代码，看着逻辑好像没有问题，但是当我选择时，出现错误，下拉框明明已经选择了值，但是仍然验证失败

addCaseRules: {
            selected_value: [{ required: true, message: '请选择项目', trigger: 'change' }]
        },

网上查了一下原因，这位老哥的话提醒了我，博客链接为：https://blog.csdn.net/weixin_38645718/article/details/105722670

他说：rules 如果想校验成功，则 prop="appCategory" 和 v-model="appTemplateForm.appCategory" 以及 rules 中的名字必须一致，都为 appCategory

但是我查看了一下我的代码是符合这个要求的啊，后来发现我的selected_value没有放在表单addCaseForm中，导致出现问题经过修改后，代码如下：

<el-form :model="addCaseForm" :rules="addCaseRules" ref="addCasesRef" label-width="100px">
          <el-form-item label="所在项目" prop="selected_value">
              <el-select v-model="addCaseForm.selected_value" placeholder="请选择项目">
                  <el-option
                      v-for="item in projectsList"
                      :key="item.id"
                      :label="item.project_name"
                      :value="item.id">
                  </el-option>
              </el-select>
          </el-form-item>
</el-form>

addCaseForm: {
// 被选中的值
  selected_value: ''
},
addCaseRules: {
  selected_value: [{ required: true, message: '请选择项目', trigger: 'change' }]
},

问题成功解决