带axios的Vuelidate

Question

我正在对一个使用vuelidate的用户进行重复测试，并且在一个TypeError上接收一个errors[0].$message，它位于一个p标记中，只有在出现错误时才会呈现。

这是密码

<template>
    <v-container>
        <v-row>
            <v-col cols="12">
                <label>Username</label>
            </v-col>
            <v-col cols="12">
                <input type="text" v-model.lazy="username" placeholder="Username" @blur="v$.username.$touch">
                <p v-if="v$.username.$error" class="red--text">{{v$.username.$errors[0].$message}}</p>
            </v-col>
        </v-row>
    </v-container>
</template>

<script>
import axios from 'axios'
import useVulidate from '@vuelidate/core'
import {required, helpers, minLength} from '@vuelidate/validators'

const isUsernameTaken = (value) => axios.get('userunique', {params: {username: value}}).then(res => {return res.data})

export default{
    setup(){
        return {
            v$: useVulidate()
        }
    },

    data(){
        return {
            username: ''
        }
    },
    validations(){
        return{
            username: {
                required,
                minLength: minLength(4),
                isUserUnique: helpers.withMessage('Username taken', helpers.withAsync(isUsernameTaken))
            }
        }
    }
}
</script>

和错误

TypeError: Cannot read properties of undefined (reading '$message')

vue.runtime.esm.js:619 [Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading '$message')"

验证工作很好，但是控制台中的错误对我来说有点麻烦，任何帮助都会很好，谢谢。

Answer 1

这看上去像是Vuelidate逻辑中的一个bug。docs for $error州..。

等效于这个。$脏&&！这个。$未决&这个。$无效。

然而，在测试中，它似乎不符合$pending状态。

这意味着在您的异步验证器运行时，$error可以是true，$errors可以是空的。

一个简单的解决方法是使用不同的条件来呈现错误块.

<p v-if="v$.username.$errors.length" class="red--text">
  {{ v$.username.$errors[0].$message }}
</p>

在此提出的问题--维甲酸酯~ https://github.com/vuelidate/vuelidate/issues/1046