搜索输入中的 Vue Inertia 观察器

Question

每当我输入任何字符时，页面总是会重新加载，我不希望发生这种情况。

watch(search, value => {
    Inertia.get('users',
        { search: value },
        { preserveState: true, replace: true }
    );
});

这就是我通过使用 vue 组合 api 中的 watch 和惯性来跟踪搜索框输入的方法。但没用。

Route::get('users', function () {
    return Inertia::render('Users/Index', [
        'users' => User::query()
            ->when(Request::input('search'), fn($query, $search) => $query
                ->where('name', 'LIKE', "%{$search}%")
            )
            ->paginate(10)
            ->withQueryString()
            ->through(
                fn($user) => [
                    'id' => $user->id,
                    'name' => $user->name,
                ]
            ),
        'filters' => Request::only(['search']),
    ]);
})

这是我的服务器端代码，我对 10 个结果进行分页，并检查搜索框中是否存在任何查询。

我的主要目标是让页面在我搜索某些内容时不会重新加载。它应该等到我完成打字。谢谢！

Answer 1

您似乎正在尝试监视搜索值并在每次搜索值发生变化时调用回调函数。当使用带有“replace: true”的监视功能时，表示服务器的响应应该替换当前页面内容而不是附加到当前页面内容，从而导致每次搜索值更改时都会重新加载整个页面。 为了实现防止页面表单重新加载并仅在完成输入后才发出请求的目标，请考虑添加延迟机制。

let delayTimeout;

 watch(search, value => {
   clearTimeout(delayTimeout);

   delayTimeout = setTimeout(() => {
     Inertia.get('users', {
     search: value,
   }, {
     preserveState: true,
     replace: true,
   });
 }, 500); // Adjust the debounce delay (in milliseconds) as needed
})

Answer 2

我偶然发现这个论坛正在寻找同一问题的解决方案。幸运的是，我遵循了文档并找到了正确的方法。您唯一要做的就是导入 router 而不是 Inertia。

import { router } from "@inertiajs/vue3";

watch(search, (value) => {
    router.get("/users", { search: value }, { preserveState: true });
});

问候...