vee-validate - независимая проверка форм с разделенными методами

Question

В настоящее время у меня есть две формы в два отдельных шага, каждый со своей кнопкой отправки.

Если я использую $ validator.validateAll (), все входные данные на странице будут проверены, но мне нужна проверка только для этой формы.

Вот что у меня есть:

<v-form ref="form1">
    <v-text-field
        v-model="Account"
        v-validate="'required|numeric'"
        :error-messages="errors.collect('Account')"
        label="Account"
        data-vv-name="Account"
        name="account"
        color="primary"
        required
        ></v-text-field>
    <v-text-field
        v-model="PhoneNumber"
        v-validate="'required|numeric'"
        :error-messages="errors.collect('Phone Number')"
        label="Phone Number"
        data-vv-name="Phone Number"
        name="phone"
        color="primary"
        required
        ></v-text-field>
    <v-btn color="primary"
        @click="NextStep()"
        >
        Next
    </v-btn>
</v-form>

И вторая форма

<v-form ref="form2">
    <v-text-field
        v-model="Email"
        v-validate="'required|email'"
        :error-messages="errors.collect('Email')"
        label="Email"
        data-vv-name="Email"
        name="email"
        color="primary"
        required
        ></v-text-field>
    <v-text-field
        v-model="Address"
        v-validate="'required'"
        :error-messages="errors.collect('Address')"
        label="Address"
        data-vv-name="Address"
        name="Address"
        color="primary"
        required
        ></v-text-field>
    <v-btn color="primary"
        @click="FinalStep()"
        >
        Next
    </v-btn>
</v-form>

С этим JS в моем * .vue файле:

async NextStep(){
    if (await this.$refs.form1.validate()) {
        this.SubmitOrder['Account'] = this.Account
        this.SubmitOrder['PhoneNumber'] = this.PhoneNumber
        this.ConfigureNumber = true;
    }
},
async FinalStep(){
    if (await this.$refs.form2.validate()) {
        this.SubmitOrder['Email'] = this.Email
        this.SubmitOrder['Address'] = this.Address
        this.ConfigureNumber = true;
    }
},

Если я удаляю $refs и меняю его на $validator.validateAll() это работает, но не переходит к следующему шагу, потому что проверяет следующие входные данные.

data-vv-scope (https://baianat.github.io/vee-validate/examples/scopes.html) не будет работать для меня, потому что мне нужны другие методы (это будетесть больше на каждом)

Есть идеи, что здесь не так?

Tks!

Answer 1

Проблема решена с использованием data-vv-scope = "нечто", на которое есть ссылка в validateAll ('что-то'):

<v-form data-vv-scope="form1">
    <v-text-field
        v-model="Account"
        v-validate="'required|numeric'"
        :error-messages="errors.collect('Account')"
        label="Account"
        data-vv-name="Account"
        name="account"
        color="primary"
        required
        ></v-text-field>
    <v-text-field
        v-model="PhoneNumber"
        v-validate="'required|numeric'"
        :error-messages="errors.collect('Phone Number')"
        label="Phone Number"
        data-vv-name="Phone Number"
        name="phone"
        color="primary"
        required
        ></v-text-field>
    <v-btn color="primary"
        @click="NextStep()"
        >
        Next
    </v-btn>
</v-form>

async NextStep() {
    await this.$validator.validateAll('form1').then((isValid) => {
        if (isValid) {
          this.SubmitOrder['Account'] = this.Account
        this.SubmitOrder['PhoneNumber'] = this.PhoneNumber
        this.ConfigureNumber = true
        } else {
          this.ConfigureNumber = false
        }
      })
}

Answer 2

Попробуйте сделать, как показано ниже

const results = Promise.all([
  this.$validator.validate('field1'),
  this.$validator.validate('field2')
]);

const areValid = (await results).every(isValid => isValid);