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-驗證如何在提交可用輸入後避免錯誤

回答

相關問題