如何 debounce/delay 在 vee-validate 中显示错误信息

Question

我正在使用以下版本：

"vue": "^2.1.0",
"vee-validate": "2.0.0-beta.14",

如何消除错误消息的显示。

我在下面的代码中尝试了 delay、v-delay 和其他几个，但似乎没有任何效果。

<input type="number" v-validate data-rules="required|numeric" name="number" delay="1800"/>

在早期版本中，这通常是通过 data-vv-delay 发生的。

Answer 1

升级到最新版本的 Vue & VeeValidate，然后继续使用：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>

以上代码片段在使用您的版本（Vue 2.1.0 和 VeeValidate beta 14）时出现了一些错误。问题似乎在于 beta 14 有点不可靠！

如何 debounce/delay 在 vee-validate 中显示错误信息

How to debounce/delay showing error message in vee-validate

validation

input

vue.js

vuejs2