如何在Laravel的Inertia/Vue中實現效率最高的資料庫搜尋方法

Question

我想要搜尋客戶清單並按原樣更改元件。

目前我使用此連結搜尋特定客戶 /customer/$searchColumn/$searchTerm?page=4

這是我的控制器回傳的內容

return Inertia::render('Dashboard', [
    'customers' => Customer::whereLike("nr", (string)$request)->paginate(10),
]);

渲染一個有分頁的所有找到的項目的表格。

Vue目前很簡單:

<pre class="snippet-code-html lang-html prettyprint-override"><code><script setup>
  import { usePage } from '@inertiajs/vue3'
  import Pagination from '@/mycompany/Pagination.vue';
  const page = usePage()
</script></code>

在前端，我用以下方式渲染一個表格:

<pre class="snippet-code-js lang-js prettyprint-override"><code>v-for="customer in $page.props.customers.data"</code>

我想要一個位於表格頂部的搜尋框，當我輸入時重新載入結果。

我不知道從哪裡開始。

Answer 1

對於這種情況，您可以使用常規的ajax/fetch請求來完成。

Inertia仍然利用laravel進行路由，所以沒有某種請求或重定向是不可能完成這種表單請求的。

甚至inertia.js的創建者也支援使用xhr/fetch請求與inertia一起使用。