CODEWITHSUNDEEP
javascriptvue.jsnuxt.jsvuelidate
Simon
Simon

Reputation: 663

Vuelidate does not work correctly when the data model is different from validations model

When the data model is different from validations model, required and minLength are not validating correctly. https://jsfiddle.net/2vs9kdb3/4/


<input v-model="text" @blur="$v.form.text.$touch()" :class="{ 'is-invalid': $v.form.text.$error }">
<template v-if="!$v.form.text.minLength">
    Text is too short
</template>


....


data: {
    text: ''
},

validations: {
    form: {
        text: {
        required,
        minLength: minLength(5)
        }
    }
}

Upvotes: 0

Views: 502

Answers (2)

Simon
Simon

Reputation: 663

Although it is not stated in the docs the validations structure must be the same as the data model.

Upvotes: 0

mostafa
mostafa

Reputation: 478

You should follow the convention. first: use

data: {
 form: { text: '' }
}

and also use v-model="$v.form.text.$model".

Upvotes: 2

Related Questions