VueJS Vee-validate in Custom Functional Components

Question

I am attempting validate the value of a custom functional component, but vee-validate appears to be ignoring it. 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. Is it because it is a functional component and doesn't support the $watch API? I want this to be a simple wrapper around textarea and not a full blown component, if possible.

VueJS: 2.6.11
Vee-Validate: 2.2.15

logaretm logaretm · Accepted Answer · 2020-07-08T23:28:35

vee-validate v2 doesn't play well with functional components as it requires access to Vue's component instances $watch and few other APIs.

I don't think there is a way around it

VueJS Vee-validate in Custom Functional Components

1 Answers