Vee Validate表单中PrimeVue InputMask的v-bind绑定失效问题

问题核心在于PrimeVue InputMask的属性/事件规范和Vee-Validate的field对象不兼容，直接v-bind="field"无法正确触发值更新逻辑。

修改MyInputTelefone.vue组件 #

将InputMask的绑定方式从v-bind="field"改为手动绑定值和更新事件：

<template>
    <Field :name="fieldName" v-slot="{ field, errorMessage }">
        <label :for="field.name">{{ label }}:</label>
        <InputMask 
            :id="field.name"
            :model-value="field.value"
            @update:model-value="field.handleChange"
            class="w-100" 
            mask="(99) 9 9999-9999" 
            placeholder="(99) 99999-9999" 
            :class="{ 'p-invalid': errorMessage }"
        />
        <small v-show="errorMessage" class="p-error">{{ errorMessage }}</small>
    </Field>
</template>
<script>
import { Field } from 'vee-validate'
export default {
    components: {
        Field
    },
    props: {
        fieldName: {
            type: String,
            required: true
        },
        icon: {
            type: String,
            required: false,
            default: ''
        },
        label: {
            type: String,
            required: true
        },
        inputType: {
            type: String,
            required: false,
            default: 'text'
        }
    }
}
</script>
<style scoped></style>

关键说明 #

• PrimeVue InputMask遵循Vue的v-model规范，通过model-value接收值，update:model-value事件通知值变更
• Vee-Validate的field对象提供field.value作为当前字段值，field.handleChange用于更新表单状态
• 手动绑定这两组属性/事件后，即可实现InputMask与表单字段的双向同步，同时保留Vee-Validate的验证逻辑

验证效果 #

修改完成后，输入框内容会实时同步到表单的values对象，提交时能正确获取telefone字段值，必填项验证也会正常触发。

内容的提问来源于stack exchange，提问作者Wagner Faria