Vee-validate: Using VeeValidate inside dynamic component

[giodum]

Versions:

• VueJs: 2.3.1
• Vee-Validate: 2.0.0

Description:

Hello everyone, I am trying to create a dynamic input component to reduce markup writing. It should include frontend validation via VeeValidate and it should be parametric. So, I decided to introduce a parameter where validation rules can be specified according to VeeValidate syntax. However, it doesn't work. I think it could be due to the order of file processing. Can anyone suggest me a possible solution?

Source code:

Here there is the import of VeeValidate in the project:

import VeeValidate, { Validator } from 'vee-validate';
import it from 'vee-validate/dist/locale/it';

const veeconfig = {
  errorBagName: 'verrors', // change if property conflicts.
  fieldsBagName: 'fields',
  delay: 0,
  locale: 'it',
  strict: true,
  enableAutoClasses: false,
  classNames: {
    touched: 'touched', // the control has been blurred
    untouched: 'untouched', // the control hasn't been blurred
    valid: 'valid', // model is valid
    invalid: 'invalid', // model is invalid
    pristine: 'pristine', // control has not been interacted with
    dirty: 'dirty' // control has been interacted with
  }
};

This is the component definition of DynamicInput.vue:

<template>
    <div class="field">
      <label :for="labelfor" class="label">{{ labeltext }}</label>
      <p class="control">
        <input  type="text"
                    :class="{ 'input': true,
                                    'is-danger': verrors.has (this.name) }"
                    :name="name"
                    :v-validate="validation" />
      </p>
      <p class="help is-danger" v-show="errors.has(name)" v-cloak>
        {{ errors.first(name) }}
      </p>
    </div>
</template>

<script>
  export default {
    inherit: true,
    name: "d-input",
    props: {
      name: {
        type: String,
        required: true
      },
      validation: {
        type: String
      },
      labelfor: {
        type: String
      },
      labeltext: {
        type: String,
        default: ""
      }
    },
  }
</script>

This is the way I call the component in the page:

<d-input  labelfor="name"
                 labeltext="Nome"
                 name="name"
                 validation="'required'" />
</d-input>

I have also tried to pass validation parameters in different ways, like :validation="'required'"or validation="required", but it doesn't work.

I noticed that inspecting the generated code after the page rendering, the attribute validate stays there in the input; on the other hand, if I use VeeValidate as usual, the attribute is not present.

Thank you very much in advance.

[logaretm]

Did you try v-validate="validation" since it is not actually an attribute, its a directive, directives by default are bound, so you don't need to add the :

[stonkeep]

this worked for me
<input v-validate="'required|min_value:1|max_value:' + months">

where

data () 
  return {
    months: 12
  }