版本
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>
Component.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
})
});
最佳答案
您可以使用父$validator
在子组件中。
参见created()
Hook 子组件:
Children.vue
<template>
<div>
<div class="input-group">
<input
type="text"
:name="name"
:value="value"
@input="handleInput"
:maxlength="maxlength"
:placeholder="placeholder"
v-validate="validate"
:class="{'is-danger': $errors.has(name), 'form-control' : true}"
>
Errors: {{ $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>
</template>
<script>
export default {
name: 'Temp',
props: ['maxlength', 'minlength', 'placeholder', 'validate', 'value', 'name'],
data: () => ({
counter: 0
}),
methods: {
handleInput (event) {
this.$emit('input', event.target.value)
this.counter = event.target.value.length
}
},
created () {
this.$validator = this.$parent.$validator
}
}
</script>
Parent.vue
<children
maxlength="20"
minlength="3"
placeholder="works"
validate="required|numeric"
v-model="dataItem.teste"
name="teste"
></children>
有 2 个更好的支持解决方案,但您需要移动 <span>
在 Parent.vue
中进行验证组件,因为 errors
/$validator
将不在 Children.vue
中提供组件。
此外,我无法能够在同一表单中拥有多个具有相同名称的输入组件,但您可以查看它们并进行测试:
解决方案1
你可以使用Vue的provide/inject API :
Children.vue
export default {
inject: ['$validator'],
// ...
}
解决方案2
使用 VeeValidate 的 constructor options :
Children.vue
export default {
$_veeValidate: {
// value getter
value () {
return this.value
},
// component name getter
name () {
return 'children'
}
}
// ...
}
关于vue.js - 自定义组件中的 VueJS Vee-validate,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47982820/