V-validate on dynamic custom component

Question

I am using Vee-validate (https://baianat.github.io/vee-validate/) to validate all my forms. Now I would like to do the following:

In my form the "value" field is a dynamic component, depending on the type of the current object. Type can be integer, string, decimal etc.

So if the type changes, the input changes, too.

This is how I did this:

   <component
     :name="'attribute-value'"
     v-model="attribute.value"
     :is="attribute.type">
   </component>

And

import string from '@/components/fields/String'
import integer from '@/components/fields/Integer'
import decimal from '@/components/fields/Decimal'

export default {
  name: 'edit',
  metaInfo: {
    title: 'Edit'
  },
  components: {
    string, integer, decimal
  },
}

Alright - each field should have it's own validation. The integer-field should only allow numbers. So I would like to do this:

<template>
    <b-input
      :id="name"
      :name="name"
      type="number"
      v-validate="{ required: true, numeric: true }"
      :state="errors.has(name) ? 'invalid' : ''"
      :value="value"
      v-on:input="$emit('input',$event)"/>
</template>
<script>
export default {
    name: 'Integer',
    inject: {
        $validator: '$validator'
    },
    props: ['name', 'value'],

    $_veeValidate: {
        name() {
            return this.name;
        },
        value() {
            return this.value;
        }
    },
}
</script>

Unfortunately, there are no errors shown, if I enter something else than a number. And: The submit-method on the parent component does not prevent the submission.

I am thankful for all of your comments :-)

Navaneeth Vijay Navaneeth Vijay · Accepted Answer · 2019-06-18T07:02:04

You need to use v-bind to pass any data to the component instead of v-model. Another way to do is, you can create one generic component, say BaseInput which takes yours input current object as props. Inside your BaseInput component you can select your Integer or String component using v-if, like this.

<template v-if="inputCurrentObject.type === 'string' ">
  <Integer :input="inputCurrentObject.value" />
</template>

Inside your BaseInput you can render the components based on the input type.

V-validate on dynamic custom component

1 Answers