Vee-validate: Error message still displayin after enter/submit value

[ghost]

Versions:

• VueJs: 2.4.2 . / Vuex:2.4.0
• Vee-Validate: 0.5.0

Description:

In AddItemComponent , I'm validating an input field triggered w keyup/submit , vaidation is fine ( msg displayed when user enter an empty value. But when the user enter a correct value, in addItem() method the item is added to the itemList ( parent component @add event emitted) then a new empty item is created for next input... this raises again the 'required error' even if I'm NOT using v-validate.initial .. I tried to inerst this.errors.clean() after this.newItem= '', wo getting rid of the error message ..

Steps To Reproduce:

AddItemComponent.vue (child)

    <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.errors.clear()
            }
            this.$store.dispatch('updateList', this.id)
          }
        }
      }
    </script>

ShoppingListComponent.vue (parent)

    <template>
      <div>
        <h2>{{ title }}</h2>
        <add-item-component :id='id' @add="addItemToList"></add-item-component>
        <items-component :items="items" :id="id"></items-component>
        <div class="footer">
          <hr />
          <change-title-component :title="title" :id="id"></change-title-component>
        </div>
      </div>
    </template>

    <script>
      import AddItemComponent from './AddItemComponent'
      import ItemsComponent from './ItemsComponent'
      import ChangeTitleComponent from './ChangeTitleComponent'

      export default {
        components: {
          AddItemComponent,
          ItemsComponent,
          ChangeTitleComponent
        },
        props: ['id', 'title', 'items'],
        methods: {
          addItemToList (text) {
            if (text.length > 0) {
              this.items.push({
                text: text,
                checked: false
              })
            }
          }
        }
      }
    </script>

    <style scoped>
      .footer {
        font-size: 0.7em;
        margin-top: 20vh;
      }
    </style>

[logaretm]

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.

https://jsfiddle.net/logaretm/9xm0vzL4/

[ghost]

Thanks a lot ! got it...