0👍
✅
Upgrade to the latest versions of Vue & VeeValidate, then continue using: data-vv-delay
:
Vue.use(VeeValidate)
new Vue({
el: '#app',
})
.is-error {
border: 2px solid red;
}
.form-group {
margin-top: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>
<script src="https://cdn.jsdelivr.net/vee-validate/2.0.0-beta.17/vee-validate.js"></script>
<div id="app">
<div class="form-group">
<label class="label" for="email">Email</label>
<input
v-validate
data-vv-rules="required|email"
:class="{'is-error': errors.has('email') }"
name="email"
type="text"
data-vv-delay="2000"
placeholder="Email">
<span v-show="errors.has('email')">
{{ errors.first('email') }}
</span>
</div>
<div class="form-group">
<label class="label" for="number">Number</label>
<input
v-validate
data-vv-rules="required|numeric"
:class="{'is-error': errors.has('number') }"
name="number"
type="number"
data-vv-delay="2000"
placeholder="Number">
<span v-show="errors.has('number')">
{{ errors.first('number') }}
</span>
</div>
</div>
The above snippet threw some errors when using your version (Vue 2.1.0 & VeeValidate beta 14). The issue seems to lie with beta 14 being a bit dodgy!
Source:stackexchange.com