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

Question

我将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">

上述规则适用于所有规则，但无法从唯一电子邮件规则解析已注册的邮件电子邮件。我需要添加什么，以便在异步验证失败时显示来自err部分的消息。

当前，当唯一电子邮件验证程序失败时，它仅显示电子邮件无效消息。我错过了什么？




Answer 1

您似乎忘记收集错误信息，例如：

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”是默认值，您不需要显式定义它。

Answer 2

如果您查看文档，似乎需要手动处理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
   })

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

1. 将属性vid=“message”添加到您的v-text字段周围的ValidationProvider（VP）

或者，也许我错过了什么！你是从哪里想到要归还你在问题中的物品的？我在当前文档中看不到任何类似的内容。。。

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