Reputation: 2425
I have a child component
<v-form ref="form" v-model="valid" lazy-validation>
<v-select v-model="test" :items="data" :rules="[v => !!v || 'Required']"></v-select>
</v-form>
If i try this.$refs.form.validate()
in child component it is validating.
And in parent component, i have a simple button
<v-btn color="primary" @click="save()">save</v-btn>
On clicking on the button i can call the child component method to get the validation status of the child form. It works great.
Now i would like to disable the button, if the child form is not valid. What is the best way to do this?
Upvotes: 0
Views: 1659
Reputation: 28982
The validity of your form is updated live by vuetify, via the v-model property of the v-form. You just need to bind this property such that it's accessible from wherever you need it. When a property like this is used in more than one component, it's shared state. I much prefer getting shared state out of Vue components, and putting it in a global object that I like to call vueStore. There are other ways to share state, but I like this way !
var vueStore = {
valid:false
}
Vue.component('my-child',{
template: `
<v-form ref="form"
v-model="vueStore.valid"
>
<v-select v-model="test" :items="items" :rules="[v => !!v || 'Required']"></v-select>
</v-form>`,
data(){
return {items:['','red','green','blue'],
vueStore:vueStore,
test:null
}
}
})
var vm = new Vue({
el:'#app',
data:{vueStore:vueStore},
methods:{
save(){
alert("saving...")
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.18/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.5.5/vuetify.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.5.5/vuetify.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div id="app">
<v-app>
<my-child></my-child>
<v-btn color="primary" @click="save()" :disabled="!vueStore.valid">save</v-btn>
</v-app>
</div>
Upvotes: 2