TypeError: Cannot read property 'rules' of undefined

[lucien144]

Versions:

• VueJs: 2.5.2
• Vee-Validate: 2.0.4

Description:

👋 Hello! Thanks for the awesome plugin!
I'm coming with an issue... I'm passing validation rules to a custom component that's basically just a wrapper for input field. I'm passing those rules using props. The app produces 2 errors after start however the validation in that field seems to be working... Am I missing anything?

Steps To Reproduce:

Parent:

<template>
	<form>
		<base-input type="email" name="email" :validate="'required|email'">Your email?</base-input>
	</form>
</template>

Component - BaseInput.vue

<template>
	<div :class="['form-input']" :id="[`form-input--${name}`]">
		<input :type="type" :name="name" :id="name" :required="required ? required : null" v-validate="validate" />
		<label :for="name"><slot/></label>
        <span v-show="errors.has(name)" class="help is-danger">{{ errors.first(name) }}</span>
	</div>
</template>

<script>
export default {
	props: ['type', 'name', 'required', 'validate'],
};
</script>

Thanks!

[logaretm]

I have tried to replicate your issue here:

https://codesandbox.io/s/7l6y0yllx

seems to work fine, however I patched the resolveRules method with additional checks to prevent this issue from happening.

[lucien144]

Hi @logaretm,
thanks for this! It helped, all is good now. Really appreciate your hard work on this!