我使用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 ）制作，很高兴在一个地方验证所有这些 .