Sam
Sam

Reputation: 2425

How to disabled a button based on child component form validation in vue

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

Answers (1)

bbsimonbb
bbsimonbb

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

Related Questions