在范围内使用带有自定义 v-select 标记的 validateAll()答案

【问题标题】：Using validateAll() with custom v-select tag in scope在范围内使用带有自定义 v-select 标记的 validateAll()
【发布时间】：2018-10-02 21:31:26
【问题描述】：

我有一个场景，我已经确定了一个表单的范围，以便我可以使用Vee-Validate 使用以下方法对其进行验证。

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

Vue Select Component“范围”属性始终为空，即使我在表单中添加了它。但是，它在范围之外运行良好。

我的 HTML && js 文件有点像

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>

【问题讨论】：

标签： javascript jquery vue.js vee-validate v-select

【解决方案1】：

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

【讨论】：