Vue.js 사용 가능한 입력을 제출 한 후 오류를 피하는 방법을 확인하십시오.

Question

내 AddItemComponent.vue에서 입력의 유효성을 검사하고 있습니다 ... 빈 문자열을 입력 할 때 오류 메시지를 표시하고 사용자 입력시 오류를 표시하지 않고 오류 메시지를 표시합니다. 값 ... 그러나 항목을 추가 한 후 입력 필드가 지워지지 만 오류 메시지가 표시됩니다 (v-validate.initial을 사용하지 않습니다).

삽입하려고했습니다 : this. $ validator.clean() 어떤 성공

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> 

Answer 1

A S V 시리즈 - 유효성 검사 협력자 대답 당 ...이 때문에 타이밍 문제로, 뷰 사용하면 반응성 속성을 설정하면

또는 데이터 UI에 바인딩 된 항목이 즉시 업데이트되지 않으면 전달 지연이 적습니다. 그 후에 유효성 검사기를 트리거하는 구성 요소가 업데이트되므로 오류가 다시 표시됩니다.

넌 nextTick 처리기 내부 래핑 리셋 방법을 이용하여

이렇게 I는 다음과 같이 고정 된 것을 해결할 수 VUE 데브 - 툴 w

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