Element UI 表单验证无法触发自定义组件的 blur 事件怎么办？

<el-form :rules="rules">
    <el-form-item label="命令:" prop="command">
      <codemirror
        v-model="data.command"
      ></codemirror>
    </el-form-item>
</el-form>

// rules
rules: {
  command: [
    { required: true, message: "请输入命令", trigger: "blur" }
  ]
}

在 codemirror 里输入命令后，无法触发 blur，让验证信息消失。

如何解决？

首先给 el-form-item 加个 ref

<el-form :rules="rules">
    <el-form-item label="命令:" prop="command" ref="command">
      <codemirror
        v-model="data.command"
      ></codemirror>
    </el-form-item>
</el-form>

然后写个 watch，手动触发 el.form.blur 事件，就可以了。

watch: {
  "data.command"() {
    this.$refs.command.$emit("el.form.blur");
  },
},

参考资料