[英]VueJS Vee-validate in Custom Functional Components
I am attempting validate the value of a custom functional component, but vee-validate appears to be ignoring it.我正在尝试验证自定义功能组件的值,但 vee-validate 似乎忽略了它。 The field does not appear in the fields list, nor in the errors list.
该字段不会出现在字段列表中,也不会出现在错误列表中。
Functional Component (simplified):功能组件(简化):
const noop = () => {};
export const TextField = {
name: 'TextField',
functional: true,
props: {
value: {},
name: {}
},
render(h, {props, listeners}) {
let options = { rows: 5 }
options['class'] = 'Field'
options['name'] = props.name
const onChange = listeners['change'] || noop;
const onInput = listeners['input'] || noop;
return h('textarea',{
domProps: {value: props.value},
attrs: options,
on: {
change: (event) => {
onChange(event)
},
input: (event) => {
console.log('input on-input',event)
onInput(event.target.value)
}
}
},[])
}
};
Parent invocation:父调用:
<text-field v-model="form.note.text" name="text" v-validate="'required'"></text-field>
The v-model works and the parent form data is updated, but vee-validate doesn't appear to recognize the component. v-model 有效并且父表单数据已更新,但 vee-validate 似乎无法识别该组件。 Is it because it is a functional component and doesn't support the $watch API?
是不是因为是功能组件,不支持$watch API? I want this to be a simple wrapper around textarea and not a full blown component, if possible.
如果可能的话,我希望这是一个简单的 textarea 包装器,而不是一个完整的组件。
vee-validate v2 doesn't play well with functional components as it requires access to Vue's component instances $watch
and few other APIs. vee-validate v2 不能很好地与功能组件配合使用,因为它需要访问 Vue 的组件实例
$watch
和一些其他 API。
I don't think there is a way around it我认为没有办法解决它
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.