element-plus的el-form-item表单验证的小坑

element-plus的el-form-item表单验证的小坑

问题描述：

该段代码使用了表单验证，但是输入正确值后表单验证仍然不通过

问题代码如下：

template:

 <el-form
        class="dialog-form"
        :model="itemForm"
        :rules="rules"
        ref="newitemRef"
      >
        <el-form-item label="成果名称" prop="result">
          <el-input
            v-model.trim="itemForm.achievementName"
          />
        </el-form-item>
<el-form />

js:

const rules = {
  result: [
    { required: true, message: "请输入成果名称", trigger: "blur" },
  ]
};

问题解决：

这是由于item上的prop和v-model绑定的要素不一样导致的，将'result'改成'achievementName'即可

修改后代码：

template：

 <el-form
        class="dialog-form"
        :model="itemForm"
        :rules="rules"
        ref="newitemRef"
      >
        <el-form-item label="成果名称" prop="achievementName">
          <el-input
            v-model.trim="itemForm.achievementName"
          />
        </el-form-item>
<el-form />

js:

const rules = {
  achievementName: [
    { required: true, message: "请输入成果名称", trigger: "blur" },
  ]
};

表单验证成功