Vue3中vee-validate结合Yup验证失效：数据未正确绑定？

你的问题核心是vee-validate的验证逻辑没有和你的modalData绑定：默认情况下useForm会创建独立的表单数据模型，不会自动关联你自定义的modalData，所以即便你输入了内容，验证逻辑读取的还是它自身维护的空值，导致始终提示"Name is required"错误。

解决方案一：让useForm复用你的modalData #

修改useForm初始化配置，通过values选项传入modalData，让vee-validate直接使用这个数据源做验证：

const { errors, validate } = useForm({
  validationSchema: schema,
  values: modalData, // 新增此行，绑定你的自定义数据源
});

配置后，验证逻辑会直接读取modalData的字段值，和输入内容同步。

解决方案二：使用vee-validate标准表单模型（更推荐） #

放弃自定义的modalData，直接使用useForm返回的values作为表单数据源，这是vee-validate的标准用法，能从根源避免绑定问题：

1. 修改脚本代码：

const isSubmitted = ref<boolean>(false)

const schema = Yup.object({
  name: Yup.string().required('Name is required').min(4, 'too short'),
});
// 解构出vee-validate提供的values作为表单数据
const { errors, validate, values } = useForm({
  validationSchema: schema,
  // 设置表单初始值
  initialValues: {
    name: '',
    isAnonymous: false
  }
});

2. 修改模板中的v-model绑定：

<PwInput :class="{'input-validation-error': isSubmitted && errors.name }"
            id="name"
            name="name"
            v-model="values.name" <!-- 绑定到vee-validate的values -->
            :label="$t('Name')">
</PwInput>

额外注意事项 #

确保自定义组件PwInput正确实现Vue3的v-model规范：组件需接收modelValue属性，并在值变化时触发update:modelValue事件，否则vee-validate无法同步表单值。组件核心示例：

<template>
  <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
</template>

<script setup>
defineProps(['modelValue'])
defineEmits(['update:modelValue'])
</script>

内容的提问来源于stack exchange，提问作者Adam Higgins