0

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

简短地说：当输入字段 aria-invalid 为 false/true 时，是否可以切换调用/不调用 onInput: 'changeTitle' ？

感谢您的反馈

更改标题组件.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>
4

1 回答 1

0

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

所以更换 

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

和

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

格兹

于 2018-04-09T09:10:25.583 回答