只显示相关代码，如果需要更多，请告诉我。我的问题是，即使在文本字段中输入了名称。从开始，我就不能跳到下一张牌了！this.$v.$invalid永远不会变为false..我不知道我在这里错过了什么。
请注意，在没有任何值的情况下单击按钮时，错误显示正常。

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对象。