Vee-validate: Unable to get validation to work when using a component

[carlabobak]

Versions

• vee-validate: 3.0.2
• vue: 2.9.6

Describe the bug
It's possible I'm misunderstanding the documentation, but I'm unable to get validation to work when using a component.

To reproduce
Steps to reproduce the behavior:

1. Create an input component and pass in the following data as props:

<InputComponent
     v-model="formData.first_name"
     label="First Name"
     rules="required"
     type="text"
/>

1. Set up the component to expect these props:

props: {
    label: {
      type: String,
      required: true,
    },
    type: {
      type: String,
      default: 'text',
    },
    required: {
      type: Boolean,
      default: true,
    },
    rules: {
      type: String,
      default: '',
    },
    value: {
      type: String,
      default: '',
    },
  },

1. In the component HTML:

<template>
  <ValidationProvider
      v-slot="{ errors }"
      :name="label"
      :rules="rules"
    >
      <input
        :value="value"
        :name="label"
        :type="type"
        :class="{'error': errors.length}"
        @input="$emit('input', $event.target.value)"
      >
      <p v-if="errors.length" class="error__text">
        {{ errors[0] }}
      </p>
  </ValidationProvider>
</template>

1. Test and see that validation does not work. Changing the :value="value" to v-model="value" allows for the validation to work correctly, but this is not the correct way to do this with Vue so it will throw an error in the console about mutating values directly.

Expected behavior
Validation to work the same way when passing in the rules to a component.

Desktop (please complete the following information):

• OS: macOS Mojave Version 10.14.6
• Browser: Chrome
• Version: 76.0.3809.100

Additional context
I've also read over this documentation, https://baianat.github.io/vee-validate/guide/validation-provider.html#refactoring-validation-providers, and tried using the withValidation function like the example shows, but that did not change the behavior. Not sure if this is what I should be using though?

[logaretm]

You probably missed this in the docs:

The fields being validated must have a v-model so the component can correctly identify the element/component being validated. Otherwise, you need to handle the validation manually.

Your inputs are missing the v-model binding and without it, the provider cannot identify which element to validate, so you need to handle it manually.

You could refer to this example here:

https://baianat.github.io/vee-validate/guide/validation-provider.html#refactoring-validation-providers

[logaretm]

Oh, looks like there is a mistake in the docs with the withValidation example. I will correct that. Thanks!

[carlabobak]

Thank you for the clarification! I ended up accomplishing this by changing the component HTML to:

<template>
  <ValidationProvider
      v-slot="{ validate, errors }"
      :name="label"
      :rules="rules"
    >
      <input
        :value="value"
        :name="label"
        :type="type"
        :class="{'error': errors.length}"
        @blur="validate"
        @input="$emit('input', $event.target.value), validate($event)"
      >
      <p v-if="errors.length" class="error__text">
        {{ errors[0] }}
      </p>
    </ValidationProvider>
</template>

Specifically adds the validate handler on the v-slot data and I call the validate function on the blur and input event handlers, this way it accounts for if the user just skipped the field without inputting data first. The || / "or" operator would not work for me like the documentation shows since it will always hit that first function. Not sure if I'm missing something there, hopefully this way is correct as well!