版本
VueJs:2.3.3
Vee-Validate:2.0.0-rc.25
描述
我有一个自定义组件。这是一个带有字符计数器的输入,我试图将 vee-validate 放在这个输入中。我想在提交表单时显示错误。我遵循了 vee-validate 文档中的每一步,但没有成功。我的表单提交自己忽略任何输入的错误。
重现步骤:
使用 vee-validate 创建自定义组件
代码:
Parent.vue
<vue-input maxlength="20" minlength="3" placeholder="works"
validate="required|numeric" v-model="dataItem.teste" name="teste"></vue-input>
组件.js
Vue.component('vue-input', {
props: ['maxlength', 'minlength', 'placeholder', 'validate', 'value', 'name'],
template: `<div>
<div class="input-group">
<input type="text" :name="name" :value="value"
@input="$emit('input', $event.target.value);
counter = $event.target.value.length"
:maxlength="maxlength" :placeholder="placeholder"
v-validate="validate"
:class="{'is-danger': errors.has(name), 'form-control' : true}">
Erros: {{errors}}
<span class="input-group-addon">
{{ maxlength - counter }}
</span>
<span v-show="errors.has(name)" class="text-danger m-t-xs">
{{ errors.first(name) }}
</span>
</div>
</div>`,
data: () => ({
counter: 0
})
});