Categories
javascript vee-validate vue.js vuejs2

V-validate on dynamic custom component

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 🙂