确认验证后进行下一步step vuetify

时间:2019-10-05 12:42:30

标签: vue.js vuetify.js vuelidate

我用步进器编写了一个vuetify表单,当我想用​​vuelidate验证字段时,我无法进行下一步。

<v-stepper-items>
            <v-stepper-content step="1">
              <v-form
                ref="owner_form"
                v-model="valid"
                class="px-3"
                @submit.prevent="submit"
              >
                <v-text-field
                  v-model="first_name"
                  label="First Name"
                  :error-messages="nameErrors"
                  @input="$v.name.$touch()"
                  @blur="$v.name.$touch()"
                  required
                ></v-text-field>

               </v-form>

              <v-btn color="primary" @click="submit" type="submit">
                Continue
              </v-btn>

关于javascript代码:

 data: () => ({
    //counter of stepper
    e1: 0,
}),
computed: {
    nameErrors() {
      const errors = [];
      if (!this.$v.first_name.$dirty) return errors;
      !this.$v.first_name.required && errors.push("Name is required.");
      return errors;
    }
  },
methods: {
submit() {
      this.$v.$touch();
      if (this.$v.$error) return;
      // to form submit after this
      alert("Form submitted");
      console.log("e1 is: " + this.e1);
      this.e1 = 2;
    }
}

当我问veliidate first_name字段是否不包含错误时,它可以转到步骤2,但是什么也没发生

0 个答案:

没有答案