2

我正在验证我的 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>
4

1 回答 1

3

每个 vee-validate 合作者的回答...

这是因为时间问题，使用 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>
于 2017-09-25T14:29:47.320 回答