Vue.js输入验证w VeeValidate - 如何在无效时避免onInput操作

我正在使用VeeValidate插件验证输入字段（必需，最小长度为3）..它工作正常，但我如何避免调用onInput操作（以避免在输入变为无效时在存储中提交（一旦输入咏叹调 - 无效切换为false）

不久之后说：无论如何切换调用/不调用onInput：'changeTitle'当输入字段aria-invalid为false / true时？

谢谢你的反馈

ChangeTitleComponent.vue

<template>
      <div>
        <em>Change the title of your shopping list here</em>
        <input name="title" data-vv-delay="1000" v-validate="'required|min:3'" :class="{'input': true, 'is-danger': errors.has('required') }" :value="title" @input="onInput({ title: $event.target.value, id: id })"/>
        <p v-show="errors.has('title')">{{ errors.first('title') }}</p>
      </div>
    </template>

    <style scoped>
    </style>

    <script>
      import { mapActions } from 'vuex'
      import Vue from 'vue'

      import VeeValidate from 'vee-validate'
      Vue.use(VeeValidate)

      export default {
        props: ['title', 'id'],
        methods: mapActions({  // dispatching actions in components
          onInput: 'changeTitle'
        })
      }
    </script>

vuex/actions.js

import * as types from './mutation_types'
    import api from '../api'
    import getters from './getters'

    export default {
      ...
      changeTitle: (store, data) => {
        store.commit(types.CHANGE_TITLE, data)
        store.dispatch('updateList', data.id)
      },

      updateList: (store, id) => {
        let shoppingList = getters.getListById(store.state, id)
        return api.updateShoppingList(shoppingList)
        .then(response => {
          return response
        })
        .catch(error => {
          throw error
        })
      },
      ...
    }

UPDATE

我尝试使用@ input =“testValidation”捕获输入值并检查有效的输入值（必需）是否有效（aria-invalid：false）然后我发出输入值，但是在父组件中不更新props并且未触发vuex操作'changeTitle'

<template>
      <div>
        <em>Change the title of your shopping list here</em>
        <input name="title" ref="inputTitle" data-vv-delay="1000" v-validate="'required'" :class="{'input': true, 'is-danger': errors.has('required') }" :value="title" @input="testValidation({ title: $event.target.value, id: id })"/>
        <p v-show="errors.has('title')">{{ errors.first('title') }}</p>
      </div>
    </template>

    <script>
      import { mapActions } from 'vuex'
      import Vue from 'vue'

      import VeeValidate from 'vee-validate'
      Vue.use(VeeValidate)

      export default {
        props: ['title', 'id'],
        methods: {
          testValidation: function (value) {
            const ariaInvalid = this.$refs.inputTitle.getAttribute('aria-invalid')
            if (ariaInvalid === 'false') {
              this.$nextTick(() => {
                this.$emit('input', value) // should change props in parent components
              })
            } else {
              console.log('INVALID !') // do not change props
            }
          },
          ...mapActions({
            onInput: 'changeTitle' // update store
          })
        }
      }
    </script>