Vuetify with multiple forms in a page. Disable submit button on each form till validation rules criteria is met on that form

Question

If I have a single form I was able to do disable/enable of submit button on that form using the below code.

But how do I achieve this if I have multiple forms ? Vuetify has this option or should I write some code to achieve on my own ?

How to achieve this if we have a single form

HTML part

<v-form v-model="isFormValid">
  <!-- all input elements go here -->
</v-form>

<!-- disable if form is not valid -->
<v-btn :disabled="!isFormValid">Add</v-btn>

In script

data: () => ({
  isFormValid: false,
})

score 0 · Answer 1 · answered Dec 13 '21 at 12:35

Why not use a different v-model value for each v-form? Do you have an undetermined number of forms?

If you need to check all validity, you can create a computed data/method that checks all of them.

computed: {
  allValid() {
    return this.validFormContact && this.validFormPreferences;
  }
}

Vuetify with multiple forms in a page. Disable submit button on each form till validation rules criteria is met on that form

1 Answers1