javascript - 如何将一个 Vue 组件中的所有字段与另一个组件一起验证(使用 Vee-Validate)？

Question

我使用 Vue.js 2.5.13 + Vee-Validate 2.0.3。我的代码结构是:

./component-one.vue:

<template>
  <div>

    <input type="text" name="input_one" id="input_one"
           v-model="input_one" 
           v-validate="'required'"
           :class="{'is-danger': errors.has('input_one')}" />

    <component-two></component-two>

    <button @click="submitForm">Submit!</button>

  </div>
</template>

<script>
  import Vue from 'vue'
  import VeeValidate from 'vee-validate'
  import ComponentTwo from './component-two.vue'

  Vue.use(VeeValidate, {
    events: 'input|blur'
  })

  export default {
    name: "component-one",
    components: {
      ComponentTwo
    },
    data() {
      return {
        input_one: '',
      }
    },
    methods: {
      submitForm: function () {
        // Validate before submit form
        this.$validator.validateAll().then((result) => {
          if (result) {
            alert('From Submitted!')
            return
          }
          alert('Correct them errors!')
        })
      }
    }
  }
</script>

./component-two.vue:

<template>
  <div>

    <input type="text" name="input_two" id="input_two"
           v-model="input_two" 
           v-validate="'required'"
           :class="{'is-danger': errors.has('input_two')}" />

  </div>
</template>

<script>
  export default {
    name: "component-two",
    data() {
      return {
        input_two: ''
      }
    }
  }
</script>

当我点击 ComponentOne 中的 button @click="submitForm" 时，如何验证来自 ComponentTwo 的字段(用于保存所有表单数据在这个组件)。

我有一个巨大的表单，由类似的小型 Vue 组件(全部收集在 ComponentOne 中)制作而成，如果能在一个地方验证所有这些组件会很棒。

Answer 1

您可以通过 vue 引用手动触发组件上的 validateAll()，例如:

父组件

<template>
  <div>

    <input type="text" name="input_one" id="input_one"
           v-model="input_one" 
           v-validate="'required'"
           :class="{'is-danger': errors.has('input_one')}" />

    <component-two ref="validateMe"></component-two>

    <button @click="submitForm">Submit!</button>

  </div>
</template>

<script>
  import Vue from 'vue'
  import VeeValidate from 'vee-validate'
  import ComponentTwo from './component-two.vue'

  Vue.use(VeeValidate, {
    events: 'input|blur'
  })

  export default {
    name: "component-one",
    components: {
      ComponentTwo
    },
    data() {
      return {
        input_one: '',
      }
    },
    methods: {
      submitForm: async function () {
        // Validate before submit form
        const result = await this.$validator.validateAll() && await this.$refs.validateMe.$validator.validateAll()
        if (result) {
          alert('From Submitted!')
          return
        }
        alert('Correct them errors!')
      }
    }
  }
</script>