Vue+Laravel+Inertia中$page.props.user.name返回undefined求助

问题根源 #

你在Laravel控制器中使用了 User::all()，这个方法会返回所有用户的集合（对应前端的数组），而不是单个用户对象。所以前端拿到的 this.$page.props.user 是一个包含多个用户的数组，直接访问 user.name 自然会返回 undefined——因为数组本身没有name属性，只有数组里的每个用户对象才有。

两种修复方案 #

根据你的需求选择对应的方案：

方案1：传递当前登录的单个用户

如果你原本想传递的是当前登录用户，修改Laravel控制器代码：

public function home(){
  $user = auth()->user(); // 获取当前登录的单个用户对象
  return Inertia::render('Home', [ 'user' => $user]);
} 

此时前端代码无需修改，this.$page.props.user.name 就能正常获取到用户名称。

方案2：传递用户列表并正确访问

如果你确实需要传递所有用户的列表，修改前端代码来遍历数组或访问指定用户：

mounted(){
  console.log(this.$page.props.user) // 打印用户数组
  // 遍历所有用户，打印每个用户的名字
  this.$page.props.user.forEach(user => {
    console.log(user.name)
  })
  // 或者获取第一个用户的名字（可选，根据需求调整索引）
  console.log(this.$page.props.user[0]?.name)
};

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