0

When I use a static attribute, validation errors appear as expected:

<input type="number" name="phone" v-validate="'required|digits:10'">
<span>{{ errors.first(propertyName) }}</span>

But what if I don't want to hardcode the validation rules in the JavaScript? I would think this would work:

<input type="number" name="phone" :v-validate="phone.rules">
<span>{{ errors.first(propertyName) }}</span>

But no validation errors are appearing. Any ideas what I'm doing wrong?

americanknight
  • 689
  • 3
  • 18
  • 37

2 Answers2

2

I have created jsFiddle and everything seems to work fine. Feel free to check: https://jsfiddle.net/m67d8f4x/2032/

<input type="email" name="email" placeholder="Email" v-validate="rules.rule" v-model="email">
// js
  data() {
    return {
      rules: { rule: 'required' },
      email: ''
    }
  },
Sergii Vorobei
  • 1,477
  • 13
  • 19
  • This helped me realize that the `v-validate` property accepts objects without requiring a colon (`:v-validate`), which was my problem. – americanknight Oct 10 '18 at 12:10
0

I just needed to remove the colon from the v-validate property, and then the object worked. I.e. use v-validate instead of :v-validate. I was confused, because using JavaScript with other Vue attributes requires a colon.

americanknight
  • 689
  • 3
  • 18
  • 37