VueJS 处理表单组件上 api 调用的错误

问题出在可组合项中对errors的处理上。在register函数中，你将errors重新赋值为空对象{}，而应该将其赋值给errors.value来保持响应式。

修改useAuth可组合项的代码如下：

export default function useAuth() {
  let errors = ref({});

  const register = (request) => {
    errors.value = {}; // Update errors.value

    AuthService.register(request)
      .then(res => {
        console.log("res: " + res);
      })
      .catch(err => {
        const errList = err.response.data.errors;
        errors.value = errList; // Update errors.value
        console.log(errors.value);
      });
  }

  return {
    register,
    errors,
  }
}

然后，在表单组件中，你可以直接访问errors.value来获取错误对象。修改handleSubmit函数如下：

const handleSubmit = () => {
  register(request);
  console.log(errors.value);
};

这样，你应该能够在表单组件中正确地获取到错误对象。