Sometimes, we want to disable button until all validation rules are true with Vuetify and Vue.js.

In this article, we’ll look at how to disable button until all validation rules are true with Vuetify and Vue.js.

How to disable button until all validation rules are true with Vuetify and Vue.js?

To disable button until all validation rules are true with Vuetify and Vue.js, we can bind a reactive property to the form validation result value with v-model on v-form.

And then we can use that to conditionally disable the button.

For instance, we write

<template>
  <div>
    <v-form v-model="isFormValid"> ... </v-form>

    <v-btn :disabled="!isFormValid">Add</v-btn>
  </div>
</template>

to bind the isFormValid reactive property to the form validation with v-form‘s v-model directive.

Then we disable the v-btn when isFormValid is false with

:disabled="!isFormValid"

Conclusion

To disable button until all validation rules are true with Vuetify and Vue.js, we can bind a reactive property to the form validation result value with v-model on v-form.

And then we can use that to conditionally disable the button.