我正在尝试验证vuetify
. 我设法以某种方式进行了验证。但我很困惑这是否是在 vuetify stepper 上进行验证的好方法。
我使用的方法数量与向导中的步骤数量相同。我正在使用vee-validate
范围进行验证。
methods: {
submitForm1(scope) {
debugger;
this.$validator.validateAll(scope).then(result => {
if (result) {
this.e1 = 2;
}
});
},
submitForm2(scope) {
debugger;
this.$validator.validateAll(scope).then(result => {
if (result) {
this.e1 = 3;
}
});
}
},
数据:
data() {
return {
e1: 0,
name: "",
resultStep1: true
};
}
Vuetify 步进器: Form1
<v-stepper-content step="1">
<form data-vv-scope="form1">
<v-card color="lighten-1" class="mb-5" height="200px">
<v-card-text>
<v-text-field
v-model="name" label="Contract Type"
:counter="10"
:error-messages="errors.collect('name')"
v-validate="'required|max:10'"
data-vv-name="name" required data-vv-scope="form1">
</v-text-field>
</v-card-text>
</v-card>
<v-btn color="secondary" @click.native="submitForm1('form1')">Next</v-btn>
<v-btn flat>Cancel</v-btn>
</form>
</v-stepper-content>
表格 2:
<v-stepper-content step="2">
<form data-vv-scope="form2">
<v-card color="lighten-1" class="mb-5" height="200px">
<v-card-text>
<v-text-field
v-model="email" label="Contract Email"
:counter="10"
:error-messages="errors.collect('email')"
v-validate="'required|max:10'"
data-vv-name="email" required data-vv-scope="form2">
</v-text-field>
</v-card-text>
</v-card>
<v-btn color="secondary" @click.native="submitForm2('form2')">Next</v-btn>
<v-btn flat>Cancel</v-btn>
</form>
</v-stepper-content>
如果步骤增加,我正在实施的方式似乎很难管理表单和验证。因为我需要将方法数与步骤数相加。
另外,如果我想要一个按钮来制作表格,请建议我。我该怎么做?