Accessing reactive properties with vee-validate 4

Question

I am getting my head around Vee-Validate next (v4) and how I might incorporate it in a Vue 3 project without loosing Vue's reactivity (i.e. not relying on the values simply being passed to the Form submit event).

By way of example, if I were making a hypothetical component which has autocomplete functionality, and sent a get request to the server once 3 letters had been typed, but for the input itself to be valid it required 8 letters, how would I get the value associated with the input?

using plain Vue, with pseudo-code something like:

defineComponent({
  setup () {
    const myVal = ref('')
    const options = ref([])
    watchEffect(() => if (myVal.value.length > 3) {
      axios.get(...).then(serverVals => options.value = serverVals))
    })
    return { myVal, options }

how would I achieve this with vee-validate 4.x?

defineComponent({
  setup () {
    const schema = yup.object({ myVal: yup.string().required().min(8) })
    // ???? what now to watch myVal

please note this is not about autocomplete - a range slider where I wanted a server call when the value was greater than 10 but a validation message if greater than 90 would also suffice as an example.

logaretm logaretm · Accepted Answer · 2020-11-22T09:12:00

You could employ useField here to get a reactive value that's automatically watched.

const { value: myVal, errorMessage } = useField('myVal', undefined, {
  initialValue: ''
});
const options = ref([])
watchEffect(() => if (myVal.value.length > 3) {
  axios.get(...).then(serverVals => options.value = serverVals))
})

return { myVal, options }

Documentation has an example of using useField:

https://vee-validate.logaretm.com/v4/guide/composition-api#usefield()

Note that you don't have to use useForm, if you are using <Form> component and passing schema to it then that should work just fine.

Accessing reactive properties with vee-validate 4

1 Answers