Vuetify how can I disable button till all validation rules are true?

Vuetify will track the validity of form if you wrap input elements in v-form and then attach v-model to form like this:

<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>

You also need to add isFormValid to the component's data field:

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

You can read more here: https://vuetifyjs.com/en/components/forms

You can create a computed property do to it. Lets say name and site are requireds, so:

<temlate>  <v-btn :disabled="isAddButtonDisabled" @click="submit" color="grey darken-4" class="green--text text--accent-2" dark>Add</v-btn></template>

<script>export default {  data() {    return {      addTool: {        name: "",        categories: [],        created_on: "",        site: ""      },    };  },  computed: {    isAddButtonDisabled() {      return !(this.addTool.name || this.addTool.site);      // means u have neither name nor site      },  },};</script>

If you need to check if form is valid, you can do:

export default {  computed: {    formValid () {      // loop over all contents of the fields object and check if they exist and valid.      return Object.keys(this.addTool).every(field => {        return this.addTool[field] && this.addTool[field].valid;      });    }  }}

From here: https://github.com/logaretm/vee-validate/issues/853