我用步进器编写了一个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,但是什么也没发生