时间戳

首页 > 解决方案 > 扩展异步规则中的 Vee 验证消息无法显示错误消息

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

问题描述

我正在使用 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在唯一电子邮件验证器失败时显示消息。我错过了什么？

标签： vuejs2vee-validate

解决方案

如果您查看文档，您似乎需要手动处理 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"到您周围的 ValidationProvider (VP)v-textfield
  2. 将属性添加ref="myValidationObserver"到您的 ValidationObserver 中，该属性将 VP 包装在第 1 点中。

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

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

推荐阅读