Vuetify how can I disable button till all validation rules are true?
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
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