Vue.js vee-validate how to avoid error after submitting available input

Question

I am validating input in my AddItemComponent.vue... It's working fine, displaying the error message when entering empty string , not showing error when user enter any value... However after adding the item, the input field is cleared but the error message get displayed ( I am not using v-validate.initial )

I tried to insert: this.$validator.clean() after adding the item .. wo any success

UPDATE

I understand what happen , but I don't see how to solve it .. after adding item , the method 'addItem() create a new empty item to clear the input field ... this raises the validation error again...

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>

yes , you can access my current tuts project at : github.com/erwin16/ShoppingLists , see src/components/... — user762579
– user762579, Commented Nov 25, 2017 at 10:18

user762579 · Accepted Answer · 2017-09-25 14:29:47Z

A s per vee-validate collaborator answer ...

This is because of the timing issues, With Vue when you set a reactive property or data item that is bound on the UI it is not updated immediately, there is a small propagation delay. after which the component updates which triggers the validator to validate, so the error shows again.

You can fix that by using the reset method wrapped inside a nextTick handler

so I fixed it as following :

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

Collectives™ on Stack Overflow

Vue.js vee-validate how to avoid error after submitting available input

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related