键入@input时，表单输入未得到验证，只有@blur有效

问题描述

我正在使用带有输入数据验证（Vuelidate）的组合框：

<template>
    <v-comboBox
        clearable
        v-model="surname"
        :items="commonSurnames"
        label="Surname"
        placeholder="Type in the surname"
        class="pt-5 pb-5"
        :error-messages="surnameErrors"
        @input="$v.surname.$touch()"
        @blur="$v.surname.$touch()">
    </v-comboBox>
</template>

<script>
import { validationMixin } from 'vuelidate'
import { required,maxLength } from 'vuelidate/lib/validators'

export default {
    mixins: [validationMixin],validations: {
        surname: {
            required,maxLength: maxLength(30),validSurname(surname) {
                return (
                    /^[a-zA-Z]-?*.+$/.test(surname)
                )
            }
        },name: 'Surnames',data() {
        return {
            surname: '',[...]
    },methods: {
        [...]
    },computed: {
        surnameErrors() {
            const errors = []
            if (!this.$v.surname.$dirty) return errors
            !this.$v.surname.validSurname && errors.push('Format must be like: Smith or Smith-Wesson')
            !this.$v.surname.maxLength && errors.push('Surname must be at most 30 characters long.')
            !this.$v.surname.required && errors.push('Surname is required.')
            return errors
    }
}
</script>

组件版本：

  "dependencies": {
    "@vue/compiler-sfc": "^3.0.0","core-js": "^3.6.5","vue": "^2.6.11","vuelidate": "^0.7.5","vuetify": "^2.2.11"
  },

我想我所做的一切都与Vuetify Documentation中的一样，但是我的表单与文档中的表单所得到的验证有所不同：我可以超过30个字符的限制，而在键入时不会收到通知。当输入失去焦点时，我才知道。 RegEx验证的情况相同：接受任何值而不会发出错误通知。如果该值无效，则在离开输入字段时会收到通知。

从文档复制示例时是否错过了某些内容，或者@input侦听器无法正常工作？还是无法通过这种方式验证v-comboBox？

解决方法

v-combobox仅在从下拉列表中选择其有效值之一时才发出change或input事件。组合框中输入的文本实际上是搜索输入，用于查找有效值。并且该条目绑定到v-combobox的{​​{1}}道具。

v-combobox API将search-input列为搜索输入更改时触发的事件，因此您可以使用它来绑定验证处理程序：

update:search-input