Vue.js vee-验证如何在提交可用输入后避免错误

我验证我的AddItemComponent.vue中的输入... 工作正常，输入空字符串时显示错误消息，当用户输入任何内容时不显示错误值... 然而，添加项目后，输入字段被清除，但显示错误消息（我没有使用v-validate.initial）Vue.js vee-验证如何在提交可用输入后避免错误

我试图插入：this。$ validator.clean（）加入该项目.. WO任何成功

UPDATE

后

我明白发生了什么，但我看不到如何解决它.. 添加项目后，方法'addItem（）创建一个新的空项目以清除输入字段...这再次提出验证错误。 ..

AddItemComponent

<template> 
     <div> 
     <div class="input-group"> 
      <input type="text" name="item" data-vv-delay="500" v-validate="'required'" :class="{'input': true, 'is-danger': errors.has('required') }" @keyup.enter="addItem" v-model="newItem" placeholder="add shopping list item" class="form-control"> 
      <span class="input-group-btn"> 
      <button @click="addItem" class="btn btn-default" type="button">Add!</button> 
      </span> 
     </div> 
     <p v-show="errors.has('item')">{{ errors.first('item') }}</p> 
     </div> 
    </template> 

    <style scoped> 
    p { color: red; } 
    span, input, button { vertical-align: top; } 
    </style> 

    <script> 
     export default { 
     props: ['id'], 
     data() { 
      return { 
      newItem: '' 
      } 
     }, 
     methods: { 
      addItem() { 
      var text 

      text = this.newItem.trim() 
      if (text.length > 0) { 
       this.$emit('add', this.newItem) 
       this.newItem = '' 
      } 
      this.$store.dispatch('updateList', this.id) 
      } 
     } 
     } 
    </script>

来源

2017-09-23 erwin

调试瓦特VUE-DEV-工具，在所添加的UPDATE问题 – erwin

你可以做一个工作演示吗？ – C2486

是的，您可以访问我目前的tuts项目：https：//github.com/erwin16/ShoppingLists，请参阅src/components/... – erwin

每V型验证合作者答案A S ...

这是因为时间问题，随着Vue公司当你设置的反应特性或数据在UI上绑定的项目不会立即更新，传播延迟很小。在此之后，组件更新触发验证器验证，所以错误再次显示。

您可以修复通过使用包裹nextTick处理程序内的复位方法

所以我固定它如下：

<script> 
     export default { 
     props: ['id'], 
     data() { 
      return { 
      newItem: '' 
      } 
     }, 
     methods: { 
      addItem() { 
      var text 

      text = this.newItem.trim() 
      if (text.length > 0) { 
       this.$emit('add', this.newItem) 
       this.item = '' 
       this.$nextTick(() => { 
       this.$validator.reset() 
       }) 
      } 
      this.$store.dispatch('updateList', this.id) 
      } 
     } 
     } 
    </script>

来源

2017-09-25 14:29:47 erwin

Vue.js vee-验证如何在提交可用输入后避免错误

回答

相关问题