javascript vee-validate vue.js vuejs2

V-validate on dynamic custom component

I am using 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:



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:

v-validate="{ required: true, numeric: true }"
:state="errors.has(name) ? 'invalid' : ''"
export default {
name: 'Integer',
inject: {
$validator: '$validator'
props: ['name', 'value'],
$_veeValidate: {
name() {
value() {
return this.value;

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 🙂