Vuelidate never v.dirty 即使满足所有要求也始终为真

Question

仅显示相关代码，如果需要更多信息，请告诉我。 我的问题是，即使在文本字段中输入了名称。我不能去下一张卡片，因为 !this.$v.$invalid 永远不会变成假的。我不知道我在这里错过了什么..

请注意，单击按钮时错误显示正常，但没有任何值。

Vuelidate.js

import Vuelidate from 'vuelidate'
import VueTimepicker from 'vue-time-picker'


Vue.use(Vuelidate)

CardOne.js

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

  mixins: [validationMixin],
  validations: {
    name: { required, name },
  },
    methods {
      showNextCard(){
      this.$v.$touch() //it will validate all fields
      console.log(this.$v);
      if (!this.$v.$invalid) { //invalid, becomes true when a validations return false
        //you dont have validation error.So do what u want to do here
        console.log("in here");
        this.$emit("nextCard");
      }
    },
}
computed {
    name: {
      get () {
        return this.$store.state.cardOne.name;
      },
      set (value) {
        this.$store.commit('updateName', value)
      }
    },
    nameErrors () {
      const errors = []
      if (!this.$v.name.$dirty) return errors
      !this.$v.name.required && errors.push('Måste fyllas i')
      return errors
    },
}

CardOne.html

<div >
  <form>
    <v-text-field
      v-model="name"
      label="För- och efternamn"
      required
      @blur="$v.name.$touch()"
      :error-messages="nameErrors"
      :v="$v.name">
    </v-text-field>
    <v-btn
      v-bind:style="[formCardIndexx === 0 ? {'margin-left': 'auto'} : {}]"
      v-if="formCardIndexx != 10"
      active-class="no-active"
      class="next-button"
      type="button"
      :ripple="false"
      @click="showNextCard()">
      NÄSTA
    </v-btn>
  </form>
</div>

我看到我在查看时添加了该内容。但这并没有解决问题。这是在验证表单之前打印的 v 对象。

Answer 1

在验证中，您有：

validations: {
    name: { required, name },
  },

required 是有意义的，并且是每个https://vuelidate.js.org/#sub-builtin-validators 的有效 vuelidate 内置验证器。但是，name 没有。除非您在未显示的代码中的某处定义了客户名称验证器，否则您应该尝试删除它。它可能无法验证，因为它无法针对undefined 进行验证，从我在您的代码中看到的name 肯定会评估为。

试试：

validations: {
    name: { required },
  },