Question

我有一个子组件

<v-form ref="form" v-model="valid" lazy-validation>
  <v-select v-model="test" :items="data" :rules="[v => !!v || 'Required']"></v-select>
</v-form>

如果我尝试在子组件中使用this.$refs.form.validate()，则表示正在验证。

在父组件中，我有一个简单的按钮

<v-btn color="primary" @click="save()">save</v-btn>

单击按钮后，我可以调用子组件方法以获取子表单的验证状态。效果很好。

现在，如果子表单无效，我想禁用该按钮。最好的方法是什么？

Answer 1

通过vuetify通过v表单的v-model属性实时更新表单的有效性。您只需要绑定此属性，以便可以从任何需要的位置访问它。当这样的属性在多个组件中使用时，它就是共享状态。我更喜欢从Vue组件中获取共享状态，并将其放入我喜欢调用vueStore的全局对象中。还有其他分享状态的方法，但是我喜欢这种方式！

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>

如何在Vue中基于子组件表单验证禁用按钮

1 个答案: