Laravel 9中Inertia传递的answers数组在Vue3中被识别为对象引发Prop类型校验错误的问题排查与解决

你遇到的这个类型不匹配问题，核心是PHP数组到JSON的序列化规则导致的：

• 在PHP中，你构建的$answerArray是一个以question_id为键的关联数组（键是1、2这类非连续数字，或者如果question_id存在缺失，索引也会不连续）。当Laravel通过Inertia把这个数组传递给前端时，会将它序列化为JSON对象（也就是你在Chrome DevTools里看到的{1: {...}, 2: {...}}）——因为JSON只有连续数字索引的数组才会被识别为数组，非连续/字符串键的数组都会被转为对象。
• 而你的Vue组件中answers的props类型定义为Array，所以当收到JSON对象时，Vue的类型检查就会抛出Invalid prop警告。
• 至于responders能正常工作，是因为ResponderResource::collection()返回的是Laravel的Collection实例，它序列化后是连续数字索引的数组，所以前端收到的是标准JSON数组，完全匹配Array类型的props。

根据你的需求，有两种常用的修复方式：

方案1：将PHP关联数组转为连续索引数组（推荐，保持Vue数组类型） #

在PHP控制器中，把构建好的$answerArray转为连续索引的数组，这样序列化后就是JSON数组，和Vue的props类型完美匹配：

// 原来的循环代码结束后，添加这一行
$answerArray = array_values($answerArray);

// 然后正常返回视图数据
return Inertia::render('Answers/Select', [
    // ...其他参数
    'answers' => $answerArray,
    // ...
]);

array_values()会提取关联数组的所有值，生成一个连续数字索引的新数组。这样前端收到的answers就是[{...}, {...}]的数组结构，Vue的类型检查直接通过。

方案2：修改Vue组件的props类型为Object #

如果你希望保留question_id作为键来快速查找对应的答案（比如通过answers[questionId]直接访问），可以修改Vue组件的props定义，把answers的类型改成Object：

const props = defineProps ({
    // ...其他props
    answers: Object, // 从Array改为Object
    // ...
})

这样Vue的类型检查就不会报错，但你需要调整组件中遍历answers的逻辑，比如用Object.entries(answers)来遍历键值对：

// 示例：遍历answers的键值对
for (const [questionId, answerData] of Object.entries(props.answers)) {
    // 处理每个questionId对应的answerData
}

• 如果你需要保持数组的常规遍历方式，优先选择方案1；
• 如果你需要通过question_id快速访问对应数据，选择方案2更合适。

内容的提问来源于stack exchange，提问作者Lars Fransén