Vue.js利用可能な入力を提出した後にエラーを回避する方法を確認する

Question

AddItemComponent.vueの入力を検証しています... 空の文字列を入力するとエラーメッセージが表示され、ユーザーが入力するとエラーが表示されません値... 項目を追加した後、入力フィールドはクリアされますが、エラーメッセージが表示されます（v-validate.initialを使用していません）

これを挿入しようとしました：this。$ validator.clean（）任意の成功

UPDATE

ヲ..項目を追加した後

私は何が起こったのか分かりませんが、解決方法はわかりません。 アイテムを追加した後、メソッド 'addItem（）が空の新しい項目を作成して入力フィールドをクリアします。 Vueのでは...

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> 

Answer 1

A S V字形検証の協力者の答えは1 ...

これが原因で、タイミングの問題であり、あなたは、反応性プロパティを設定しますか、データUIにバインドされているアイテムがすぐに更新されない場合は、小さな伝搬遅延があります。その後、コンポーネントが更新され、バリデータが検証され、エラーが再度表示されます。

あなたはnextTickハンドラ内にラップresetメソッドを使用して

はので、私は、次のようにそれを固定することを修正することができます：VUE-DEV-ツールワット

<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>