扩展异步规则中的 Vee 验证消息无法显示错误消息答案

【问题标题】：Vee validate message in an extend async rule fails to show error message扩展异步规则中的 Vee 验证消息无法显示错误消息
【发布时间】：2020-06-09 12:43:26
【问题描述】：

我正在使用 vee validate 和 vuetify，我需要检查电子邮件是否是唯一的。所以在我的 vuejs 中我添加了

mounted(){

       extend('unique-email', (value) => {
         return this.$axios.post('/api/auth/unique-email', { email: value })
         .then((res) => {
          return {
            valid: true,
          };
        }, (err) => {
          return {
            valid: false,
            data: { message: 'Email already registered' }
          };
        })
        }, {
         immediate: false
       })
   }

在我的 vuetify 中我添加了

<v-textfield v-model="form.email" rules="required|email|unique-emai">

以上适用于所有规则，但不能从唯一电子邮件规则解析消息email already registred。我需要添加什么，以便如果异步验证失败，则显示来自错误部分的消息。

目前它仅在唯一电子邮件验证器失败时显示email is not valid 消息。我错过了什么？

【问题讨论】：

标签： vuejs2 vee-validate

【解决方案1】：

如果您查看docs，您似乎需要手动处理 POST 调用产生的错误，因此您可以这样做：

   extend('unique-email', (value) => {
     return this.$axios.post('/api/auth/unique-email', { email: value })
     .then((res) => {
      return {
        valid: true,
      };
    }, (err) => {
      this.$refs.myValidationObserver.setErrors({
         email: ['Email already registered']
      });
    })
    }, {
     immediate: false
   })

这需要超出扩展的两个更改：

将属性vid="message" 添加到您的v-textfield 周围的ValidationProvider (VP)
将属性 ref="myValidationObserver" 添加到您的 ValidationObserver 以将 VP 包装在第 1 点中。

或者，也许我错过了什么！您从哪里得到返回问题中对象的想法？我在当前的文档中看不到类似的东西......

      return {
        valid: false,
        data: { message: 'Email already registered' }
      };

【讨论】：

【解决方案2】：

你好像忘记收集错误信息了，比如：

extend('unique-email', (value) => {
  return this.$axios.post('/api/auth/unique-email', { email: value })
    .then((res) => {
      return {
        valid: true,
      };
    }, (err) => {
      return {
        valid: false,
        data: { message: 'Email already registered' }
      };
    })
  }, 
  getMessage: (field, params, data) => data.message
)

顺便说一句，“immediate: false”是默认的，你不需要显式定义它。

【讨论】：