从 Kendo DropDownList 中选择值时,值会更新到模型,但错误始终保留在errors
vee-validate 的对象上。
仅当再次提交表单时,该错误才会被删除。
我试图在小提琴中实现类似的情况,但小提琴显示了实际行为。小提琴上一切正常。
但是当我在实际项目中使用相同的情况时,错误不会重置。我需要再次提交表单以重置错误。
值已更新为模型,但错误仍然存在!
实际项目中使用的代码:
父组件
<template>
<div class="container-fluid">
<form @submit.prevent="onSubmit('form-client')" data-vv-scope="form-client" autocomplete="off">
<row-component :model="form_fields" :data-source="dataSourceArray" :scopes="'form-client'">
</row-component>
Selected Value: {{form_fields}}
<br/>
<button type="submit" class="ui submit button">Submit</button>
</form>
</div>
</template>
<script>
import rowcomponent from "./Child";
export default {
components: { "row-component": rowcomponent },
methods: {
onSubmit(scope) {
this.$validator.validateAll(scope).then(result => {
if (result) {
// eslint-disable-next-line
alert("Form Submitted!");
return;
}
alert("Correct them errors!");
});
}
},
data: function() {
return {
form_fields: {
type: null
},
dataSourceArray: [
{ text: "Small", value: "1" },
{ text: "Medium", value: "2" },
{ text: "Large", value: "3" },
{ text: "X-Large", value: "4" },
{ text: "2X-Large", value: "5" }
]
};
}
};
</script>
子组件
<template>
<div>
<label class="control-label">Drop Down</label>
<kendo-dropdownlist v-model='model.type' data-vv-name="Type" data-vv-as="Type" :data-source="dataSource" v-validate="'required'"
:data-text-field="'text'" :data-value-field="'value'" :option-label='"Type"' :filter="'contains'" :index="0" :auto-bind="true"
class="form-control" :class="{'input': true, 'is-danger': `errors.has(${scopes}.Type)` }">
</kendo-dropdownlist>
<span class="is-danger" v-if="`errors.has(${scopes}.Type)`">{{errors.first(`${scopes}.Type`)}}</span>
</div>
</template>
<script>
export default {
inject: ["$validator"],
props: {
model: {
type: Object,
default: {}
},
dataSource: {
type: Array,
default: []
},
scopes: {
type: String,
default: ""
}
}
};
</script>
这个实现有什么问题?在这种情况下的任何帮助表示赞赏。
有什么指导或参考吗?