自定义功能组件中的 VueJS Vee-validate答案

【问题标题】：VueJS Vee-validate in Custom Functional Components自定义功能组件中的 VueJS Vee-validate
【发布时间】：2020-07-08 22:58:55
【问题描述】：

我正在尝试验证自定义功能组件的值，但 vee-validate 似乎忽略了它。该字段不会出现在字段列表中，也不会出现在错误列表中。

功能组件（简化）：

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)
        }
      }
    },[]) 
  }
};

父调用：

<text-field v-model="form.note.text" name="text" v-validate="'required'"></text-field>

v-model 工作并且父表单数据已更新，但 vee-validate 似乎无法识别该组件。是不是因为它是一个功能组件，不支持 $watch API？如果可能的话，我希望这是一个简单的 textarea 包装器，而不是一个完整的组件。

VueJS：2.6.11
Vee 验证：2.2.15

【问题讨论】：

标签： vue.js vee-validate vue-functional-component

【解决方案1】：

vee-validate v2 不能很好地与功能组件配合使用，因为它需要访问 Vue 的组件实例 $watch 和一些其他 API。

我不认为有办法解决它

【讨论】：

感谢您的回复。转换到 v3 会提供我正在寻找的功能吗？除了看到指令消失并想知道它是否值得探索之外，我没有花时间调查需要改变的地方。