Vue.js vee-validate 如何在提交可用输入后避免错误答案

【问题标题】：Vue.js vee-validate how to avoid error after submitting available inputVue.js vee-validate 如何在提交可用输入后避免错误
【发布时间】：2017-09-23 17:33:07
【问题描述】：

我正在验证 AddItemComponent.vue 中的输入... 它工作正常，输入空字符串时显示错误消息，当用户输入任何值时不显示错误... 但是添加项目后，输入字段被清除但显示错误消息（我没有使用 v-validate.initial ）

我尝试在添加项目后插入：this.$validator.clean() .. wo 任何成功

更新

我明白发生了什么，但我不知道如何解决它.. 添加项目后，方法 'addItem() 创建一个新的空项目以清除输入字段...这再次引发验证错误...

添加项目组件

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

【问题讨论】：

调试 wue-dev-tools，在问题中添加了 UPDATE
你能做一个工作演示吗？
是的，你可以访问我目前的 tuts 项目：github.com/erwin16/ShoppingLists，参见 src/components/...

标签： vue.js vee-validate

【解决方案1】：

A s per vee-validate collaborator answer ...

这是因为时间问题，使用 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>

【讨论】：