CODEWITHSUNDEEP
vue.js
Randy Hall
Randy Hall

Reputation: 8127

VueJS v-validate methods inoperable after passing into component

Clearer question: How do I get the methods attached to the errors object to work inside a component v-validate is operating on?

Longer question:

I have v-validate set up to work on a component that contains an input.

It actually works well, except that the errors object inside the component doesn't quite operate correctly. Whenever the errors object in the parent is changed, I can see it reflected in the errors.items property - all of the errors from my form are present. But the methods are not working - this.errors.count() always returns zero, this.errors.collect(this.name) always returns an empty array.

The name property on the this.errors.list object matches this.name in the component. Even using a hard-coded string instead of this.name does not have an effect.

My thought is there is some sort of internal reference keeping hold of the methods, something to do with VueJS props maybe?

Short version of code:

<myinput v-validate="'required'" v-model="name" :name="name"></myinput>

<template>
    <div>
        <input
            :value="value"
            @input="updateValue()"
            ref="input"                
            :name="name"
            type="text"
            />
        <p v-for="error in errorMessages" :key="error.zerp">{{ error }}</p>
    </div>
</template>

props: [
    "name", 
    "value",        
],
computed: {
    errorMessages : function(){
        //this.errors.list has the errors
        //collect function always returns empty array []
        console.log(this.errors, this.error.collect(this.name));

        return this.errors ? this.errors.collect(this.name) : [];
    }
}

More info: Watching the ErrorBag.prototype.collect method in the debugger, this.items does indeed have the collection I expect to see. I've yet to figure out how it's not getting the correct final collection from the name, which I can also see in the field property correctly.

Upvotes: 0

Views: 192

Answers (1)

Peyman Eskandari
Peyman Eskandari

Reputation: 53

You should inject your validator into your child component. No need for prop or passing errors.

<script>
export default {

    name: "field",

    inject: {
        $validator: '$validator'
    },

}
<script>

Upvotes: 1

Related Questions