Vue集成Inertia实现搜索输入时出现TypeError: Cannot read properties of undefined (reading 'toString')

问题根源 #

• 后端响应结构损坏：控制器中使用echo $query->get()直接输出内容，破坏了Inertia的标准JSON响应格式，导致前端接收到的响应无效，pageResponse.url变为undefined，触发toString调用失败的错误。
• 查询未执行且条件失效：Category::when(...)未调用get()方法，返回的是QueryBuilder实例而非数据集合；同时when闭包内未返回$query，导致搜索条件未被应用到查询中。
• 前端props类型不匹配：Vue组件中categories被定义为Object，但实际后端返回的是集合（对应前端的Array类型），类型不匹配可能引发后续渲染问题。

修复步骤 #

1. 修正后端控制器（ArticleController.php）

移除echo语句，确保查询执行并返回正确的数据集，同时保证when闭包返回查询实例：

public function create(Request $request)
{
    return Inertia::render(
        'Article/New',
        [
            'categories' => Category::when($request->cateQuery, function ($query, $cateQuery) {
                return $query->where('name', 'ILIKE', '%' . $cateQuery . '%');
            })->get(), // 调用get()执行查询并返回集合
        ]
    );
}

2. 调整前端组件props类型（New.vue）

将categories的类型从Object改为Array，匹配后端返回的集合类型：

<script>
import _ from "lodash";
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout.vue";
export default {
    components: {
        AuthenticatedLayout,
    },
    props: {
        categories: Array, // 修正为Array类型
    },
    data() {
        return {
            cateQuery: "",
        };
    },
    methods: {
        // 可选：用debounce优化搜索，避免频繁请求
        searchCategory: _.debounce(function () {
            this.$inertia.get(
                route("articles.create", { cateQuery: this.cateQuery })
            );
        }, 300) // 300ms延迟，减少请求频率
    },
};
</script>

额外说明 #

• 移除echo后接口无返回内容的问题：是因为之前echo破坏了响应结构，修复后控制器会返回Inertia标准响应，前端可通过props正常获取categories数据。
• 使用_.debounce可以降低搜索请求的触发频率，提升用户体验和服务器性能。

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