Question

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

我试图在添加项目之后插入：此。$ validator.clean（）任何成功

更新

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

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>

Answer 1

每个ve-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>

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

1 个答案: