Using validateAll() with custom v-select tag in scope

Question

I have a scenario where I have scoped a form so that I can validate it using Vee-Validate using below method.

        validateTRForm: function (scope) {
        this.$validator.validateAll(scope).then((result) => {
            if (result) { }

Vue Select Component "scope" property is always null even if i added it in a form. However, it is working fine out of the scope.

My HTML && js file is some think like

 var selectComponent = Vue.component('v-select', VueSelect.VueSelect) Vue.use(VeeValidate); new Vue({ el: '#app', data: { selected:'', }, methods: { validateTRForm: function (scope) { this.$validator.validateAll(scope).then((result) => { if (result) { //do something } }); }, }, components: { component: selectComponent } }) 

 <div id="app"> <form data-vv-scope="Test"> <input name="textTest" v-validate="'required|email'" /> <span v-show="errors.has('Test.textTest')" class="help is-danger">{{ errors.first('Test.textTest') }}</span> <v-select v-model="selected" data-vv-name="testVselect" v-validate="'required'" :options="[{label: 'Test1', value: '1'}, {label: 'Test2', value: '2'}, {label: 'Test3', value: '3'}]"></v-select> <span v-show="errors.has('Test.testVselect')" class="help is-danger">{{ errors.first('Test.testVselect') }}</span> <button v-on:click.prevent="validateTRForm('Test')">Validate Elements</button> </form> </div> 

Answer 1

我通过将data-vv-scope="Test"到组件来修复它。