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

Question

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

简而言之：当输入字段 aria-invalid 为 false/true 时，是否有切换 calling/not 调用 onInput: 'changeTitle' 的方法？

感谢反馈

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
        })
      },
      ...
    }

更新

我尝试使用 @input="testValidation) 捕获输入值并检查输入值是否有效（必需）如果有效（aria-invalid: false）然后我发出输入值，但是在父组件中没有更新道具并且没有触发 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>

Answer 1

就像您在 VUE 模板中访问错误集合一样，您也可以在 testValidation 方法中访问相同的错误集合

所以替换

const ariaInvalid = this.$refs.inputTitle.getAttribute('aria-invalid')

和

 const ariaInvalid = this.$validator.errors.has('title')

grtz

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

Vue.js input validation w VeeValidate - How to avoid onInput action while invalid

validation

vue.js

vee-validate