Inertia/Jetstream 将数据返回到页面而不重新渲染答案

【问题标题】：Inertia/Jetstream return data to page without re-renderInertia/Jetstream 将数据返回到页面而不重新渲染
【发布时间】：2021-09-03 10:30:16
【问题描述】：

刚接触 Inertia 时遇到了一些麻烦：

我在 Vue 页面上有一个搜索栏，并希望返回一组过滤结果供用户从搜索栏中选择作为下拉列表。我将查询参数从搜索栏传递到 Laravel 控制器，并使用用户查询执行 where 子句：

public function showFilteredResponse(Request $request)
{
    $query = $request->query('query'); //Query passed from Vue
    $filteredResults = DB::table('documents')
        ->where('title', 'like', '%' . $query . '%')->get();

    $filteredResults //this contains the data I want the front-end to have access to. 
                     //how can this data be passed to Vue without a full page re-render?

}

如何在不重新渲染整个页面的情况下将 $filteredResults 数据返回给用户？要使用数据呈现初始页面，我有以下内容：

return Jetstream::inertia()->render($request, '/home')->with('documents', $documents);

但是，如果我想在不重新渲染的情况下向页面添加新数据，该怎么做呢？

如果我使用惯性()->render()->with()，那么我可以访问 Vue 页面上的 $filteredResults，但是我会从初始页面加载中丢失道具，除非我重复查询这似乎是正确的方法。

【问题讨论】：

为展示惯性.js 而制作的 PingCRM 演示项目有一个使用搜索的过滤选项。 Check out how it is done here.

标签： laravel inertiajs jetstream

【解决方案1】：

我相信您正在努力解决对惯性核心概念的误解。别担心。在处理将前端和后端之间的界限拉近的项目时，这种情况很常见。

如果我理解正确，您正在对您的 showFilteredResponse 方法（可能使用 axios）进行正常的 XHR 请求。如果是这种情况，您需要在客户端手动处理响应，就像在没有 Inertia 的普通 Vue 应用程序上一样。

现在，另一种解决方法（可能是更好的方法）是利用惯性的概念。您无需使用孤立的方法来过滤结果并向其发出正常的 XHR 请求，而是使用最初呈现列表的相同方法进行过滤，这意味着您也将使用相同的 URL 进行过滤，仅通过不同的参数。

在this example 上聊一聊。注意Vue组件的watch属性。当搜索模型更新时，观察者所做的只是简单地向它在第一次呈现列表时使用的相同 URL 发出请求，但传递更新的参数。

this.$inertia.get(this.route('organizations'), pickBy(this.form), { preserveState: true })

另一种方法是通过 Inertia 使用更新的参数简单地重新加载页面。当我说重新加载时，它不会刷新整个页面，而只会刷新相关的 Vue 组件。

this.$inertia.reload({
   data: pickBy(this.form)
})

【讨论】：