VeeValidate提交后禁用按钮

VeeValidate作为vue中常用的表单验证，在对按钮禁用这一块支持的不太友好，这里手动实现一下

VeeValidate相关的官网链接：
https://vee-validate.logaretm.com/v2/guide/components/validation-observer.html#validate-before-submit

这里不需要过多的去研究ValidationObserver里面的数据插槽，手动实现即可

main.js

import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
import VeeValidate from 'vee-validate';

Vue.use(VeeValidate);
// 关闭生产模式
Vue.config.productionTip = false

new Vue({
  vuetify,
  // 渲染App.vue
  render: h => h(App)
  // 生成dom, 调用render
}).$mount('#app')

app.vue

<template>
  <v-app>
    <v-main>
      <DisableButton />
    </v-main>
  </v-app>
</template>
<script>
import DisableButton from "./components/DisableButton";

export default {
  name: "App",

  components: {
    DisableButton,
  },
};
</script>

DisableButton.vue

<template>
  <ValidationObserver ref="observer"  tag="form" >
    <input rules="required" v-model="first" :error-messages="errors" />
    <v-btn :disabled="disabled" @click="submit()">Submit</v-btn>
  </ValidationObserver>
</template>

<script>
import { ValidationObserver } from 'vee-validate';

export default {
  methods: {
    async submit () {
      if(!this.disabled){
      const isValid = await this.$refs.observer.validate();
      console.log(isValid)
      }
      this.disabled=true
    }
  },
  components: {
    ValidationObserver
  },
    data: () => ({
        value:'simple',
        first: 'text',
        disabled: false
    }),
};
</script>