我有一个场景,我已经确定了一个表单,以便我可以使用Vee-Validate使用以下方法对其进行验证。
validateTRForm: function (scope) {
this.$validator.validateAll(scope).then((result) => {
if (result) { }
Vue Select Component"范围"即使我在表单中添加它,属性也始终为null。但是,它的工作范围很好。
我的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>
&#13;
答案 0 :(得分:1)
我通过向组件添加data-vv-scope="Test"
来修复它。