我想创建一个自定义组件来使用 Vee-Validate 范围来显示错误。
目前对于范围内的表格,我正在通过以下方式进行操作。
提交方法:
methods: {
onSubmit(scope) {
console.log(this.$validator)
this.$validator.validateAll().then((result) => {
if (result) {
alert('Form Submitted!');
}
});
}
}
HTML
<label>Name</label>
<input v-model="form_fields.name" data-vv-as="Partner name" data-vv-name="PartnerName" v-validate="'required'" :class="{'input': true, 'is-danger': errors.has('form-partner.PartnerName') }" type="text" class="form-control">
<div v-show="errors.has('form-partner.PartnerName')" class="help is-danger text-red">{{ errors.first('form-partner.PartnerName') }}</div>
这意味着我必须在errors.has('form-partner.PartnerName')
所有表格中重复多次。
我想简化如下。
<error-form :status="errors" :css-class="'is-danger'" label="Company Name" field="name">
<b-form-input v-validate="'required'" class="form-control" v-model="form_fields.name" name="name" data-vv-as="Company Name"
type="text" />
</error-form>
类似于这里的实现!但这不适用于范围。
我想用scopes
. 我会将范围error-form
作为道具传递给 ,如下所示。
///scope here
<error-form :status="errors" :scope='form-registraion' :css-class="'is-danger'" label="Company Name" field="name">
那么,我如何error-form
使用范围检查我的组件?范围可以是强制性的或必需的。