将 Vuelidate 与 Nuxt 结合使用 - 即使满足条件，仍会看到错误

Question

我正在尝试将 Vuelidate 与我的 Nuxt 项目一起使用。所以我安装了Vuelidate包，然后在

plugins

文件夹中创建了

vuelidate.js

：

import Vue from 'vue'
import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)

并在

nuxt.config.js

中定义它

plugins: [
  {src: '~/plugins/directives.js'},
  {src: '~/plugins/vuelidate.js', mode: 'client'}
],

顺便说一句，在没有

mode

的情况下尝试过，只使用字符串数组 - 相同的结果。

现在在我的组件中，我有以下（Vuetify）文本字段：

<v-text-field
  id='firstName'
  v-model='formData.firstName'
  label='First Name'
  name='firstName'
  prepend-icon='person'
  type='text'
  :error-messages='firstNameErrors'
  @blur='$v.formData.firstName.$touch'
  @input='$v.formData.firstName.$touch'
/>

我的进口：

import { validationMixin } from 'vuelidate'
import {
  required,
  minLength,
} from 'vuelidate/lib/validators'

我的其余代码：

export default {
    name: 'AuthForm',
    mixins: [validationMixin],
    validations: {
      formData: {
        firstName: {
          /*required: requiredIf(function() {
            return !this.isLogin
          }),*/
          minLength: minLength(2)
        },
    },
    props: {
      formData: {
        type: Object,
        required: true,
        default: () => {}
      }
    },
    computed: {
      firstNameErrors() {
        const errors = []

        if (!this.$v.formData.firstName.$dirty) {
          return errors
        }

        !this.$v.formData.firstName.minLength && errors.push('First name must be at least 2 characters long')

        // !this.$v.formData.firstName.required && errors.push('First name is required')
        return errors
      }
    }
  }

所以我试图验证firstName 至少有2 个字符。当我开始输入时，我确实看到了错误消息，但输入 2 个或更多字符时，错误仍然存在。

我尝试在计算属性中控制台日志

this.$v.formData

，但一旦加载组件并开始输入，它就会被打印。如果我检查记录的对象，我确实看到

this.$v.formData.firstName.$model

有超过 2 个字符，但无论我尝试做什么，我仍然看到错误（例如在输入时再次调用

$reset

之前调用

$touch

） ，使用

firstNameErrors

作为方法而不是计算等...）

完全相同的代码在我的 Vue 项目中为我工作，但这是我第一次使用 Nuxt，我不确定为什么这段代码停止工作。我错过了什么？

Answer 1

将 vuelidate.js 更改为：

import Vue from 'vue'
import Vuelidate from 'vuelidate'

Vue.use(Vuelidate)

export default () => { }