CODEWITHSUNDEEP
vue.jsvee-validate
Damian
Damian

Reputation: 1720

Vee Validate 3.0 - Property or method "required" is not defined on the instance but referenced during render

I feel I've almost got to grips with Vee Validate 3.0 now but I keep getting the following warning at run time:

Property or method "required" is not defined on the instance but referenced during render

I'm using a regex validation which contains pipes, so I need to send as an object rather than a string.

This is my code:

<ValidationProvider :rules="{ required, regex: /^(0[1-9]|1[0-2])\/\d{4}$/ }" name="exp" v-slot="{ errors }">
  <input name="exp" v-model="payment.exp" placeholder="Expiry MM/YYYY" class="form-control"/>
  <span class="warning">{{ errors[0] }}</span>
</ValidationProvider>

Everything compiles without warning and the validations work correctly at run time, but what's with the warning on the console?

Anyone know what do I need to do to remove it?

Upvotes: 1

Views: 1964

Answers (1)

logaretm
logaretm

Reputation: 1435

I will omit the regex for brevity. This is not a vee-validate issue, you are binding the rules prop to an object: { required }

Now what required here evaluates to? since you don't have required defined anywhere in your component you will get that error just like any non-defined reactive prop in the template.

I assume you want your field to be required, so you need to supply a value to the required key:

<ValidationProvider :rules="{ required: true }" name="exp" v-slot="{ errors }">
  <input name="exp" v-model="payment.exp" placeholder="Expiry MM/YYYY" class="form-control"/>
  <span class="warning">{{ errors[0] }}</span>
</ValidationProvider>

Upvotes: 2

Related Questions