Laravel控制器排序后的数据在Vue.js视图中未按programme_title显示排序结果的原因咨询

问题描述 #

我有3个关联数据表，想要按照programmes表的programme_title字段对数据排序。在Laravel控制器中编写代码处理后，用dump()方法能确认数组已经按programme_title排好序，但通过Inertia.js渲染到Vue.js视图时，数组却又默认按id排序了，这是怎么回事？

控制器代码示例：

return Inertia::render('Applications/Edit', [ 
  $programmes = AppProgrammes::with(['programmeInstances', 'programmes']) 
    ->get() 
    ->sortBy(function($programmes) { 
      return $programmes->programmes->programme_title; 
    }), 
  'programmes' => $programmes, 
]);

问题原因 #

这个问题的核心在于Laravel Collection序列化时的键处理：

• 你用sortBy()方法对Collection排序后，返回的新Collection会保留原数据的键（也就是数据库记录的id值），这些键不是连续的整数。
• 当Inertia把数据传递给前端时，会将Collection序列化为JSON。由于键是非连续的，JSON会把它解析成一个对象而非数组。
• Vue在遍历对象时，默认会按照键的升序（也就是id的顺序）来渲染，所以你看到的结果就是回到了按id排序的状态，而不是你期望的programme_title顺序。

解决办法 #

这里有两个简单有效的解决思路：

1. 重置Collection的键（快速修复）

在sortBy()之后调用values()方法，它会把Collection的键重置为连续的0、1、2...索引，这样Inertia序列化后就是标准的JSON数组，Vue遍历数组时会保持原排序：

return Inertia::render('Applications/Edit', [ 
  'programmes' => AppProgrammes::with(['programmeInstances', 'programmes']) 
    ->get() 
    ->sortBy(function($programme) { 
      return $programme->programmes->programme_title; 
    })->values(), // 新增values()重置键
]);

2. 数据库层面排序（更优方案）

如果数据量较大，推荐直接在数据库层面完成排序，效率比PHP处理Collection更高，也能避免序列化的问题。可以通过关联查询+排序实现：

return Inertia::render('Applications/Edit', [ 
  'programmes' => AppProgrammes::with(['programmeInstances', 'programmes'])
    ->join('programmes', 'app_programmes.programme_id', '=', 'programmes.id')
    ->orderBy('programmes.programme_title')
    ->select('app_programmes.*') // 避免字段冲突，只选择主表字段
    ->get(), 
]);

这样数据库直接返回排序好的结果，后续无论是Laravel的dump()还是前端渲染，排序都会保持一致。

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