Vue3模板调用组合式函数方法，解决错误组件传值失效问题

核心问题 #

你在Login.vue的登录失败回调里犯了个关键错误：直接覆盖了从组合式函数拿到的errors ref对象，导致响应式失效——Vue DevTools能看到值更新，但组件因为响应式断了，根本感知不到变化。

错误代码：

.catch(error => {
  // 直接给errors赋值，把原来的ref对象覆盖了，响应式没了
  errors = error.response.data.errors;
})

修复步骤 #

1. 修正响应式赋值 #

把回调里的代码改成更新ref的value属性，这样才能触发响应式更新：

.catch(error => {
  errors.value = error.response.data.errors;
})

2. 模板调用errorFor的方式没问题 #

你当前模板里调用errorFor的写法是正确的：

<validation-errors :errors="errorFor('email')"></validation-errors>

errorFor('email')会返回对应字段的错误数组（后端返回的格式应该是{ email: ['邮箱格式错误', '不能为空'] }这种），传递给ValidationErrors组件后，组件会遍历显示所有错误。

3. 可选优化：ValidationErrors的key生成 #

你现在用Math.random()生成key，每次渲染都会生成新key，容易导致不必要的DOM重新渲染。建议改成用错误内容或者索引加内容的组合：

// ValidationErrors.vue的script里
const key = (index, error) => {
  return `validation_error_${index}_${error}`;
}

模板里对应修改v-for的key：

<span
  v-for="(error, index) in props.errors"
  :key="key(index, error)"
>
  {{ error }}
</span>

验证效果 #

改完之后，登录失败时errors.value更新，errorFor会返回最新的错误信息，ValidationErrors组件就能正常接收到props并显示错误了。

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