时间戳

首页 > 解决方案 > Inertia/Jetstream 将数据返回到页面而不重新渲染

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

问题描述

刚接触 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，但是我会从初始页面加载中丢失道具，除非我重复看起来不像的查询正确的方法。

标签： laravelinertiajsjetstream

解决方案

我相信您正在为对惯性核心概念的误解而苦苦挣扎。不用担心。这在处理将前端和后端之间的界限拉得更近的项目时很常见。

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

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

看看这个例子。注意watchVue组件的属性。当搜索模型更新时，观察者所做的只是简单地向它第一次用于呈现列表的相同 URL 发出请求，但传递更新的参数。

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

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

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

推荐阅读