Vue.js vee验证如何在提交可用输入后避免错误

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

我尝试在添加项后插入：this.$validator.clean（）。。你成功了吗

更新

我知道会发生什么，但我不知道怎么解决。。 添加项后，方法“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>

添加
{{{errors.first（'item'）}
p{颜色：红色；}
span，输入，按钮{垂直对齐：顶部；}
导出默认值{
道具：['id']，
数据（）{
返回{
新项目：“”
}
},
方法：{
附加项（）{
变量文本
text=this.newItem.trim（）
如果（text.length>0）{
this.$emit（'add'，this.newItem）
this.newItem=“”
}
this.store.dispatch（'updateList'，this.id）
}
}
}

A s per vee验证合作者答案

这是因为Vue存在计时问题。当您设置绑定在UI上的反应性属性或数据项时，如果该属性或数据项未立即更新，则会出现较小的传播延迟。之后，组件更新，从而触发验证器进行验证，因此错误再次显示

您可以通过使用包装在nextTick处理程序中的reset方法修复此问题

因此，我将其修复如下：

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

导出默认值{
道具：['id']，
数据（）{
返回{
新项目：“”
}
},
方法：{
附加项（）{
变量文本
text=this.newItem.trim（）
如果（text.length>0）{
this.$emit（'add'，this.newItem）
this.item=“”
这个.$nextTick（（）=>{
这是。$validator.reset（）
})
}
this.store.dispatch（'updateList'，this.id）
}
}
}

debug w vue dev tools，在问题中添加了一个更新。您可以制作一个有效的演示吗？是的，您可以访问我当前的tuts项目，网址：，请参阅src/components/。。。