LaravelのInertia/Vueで最も効率的なデータベース検索メソッドを実装する方法

Question

顧客リストを検索してコンポーネントをそのまま変更したいのですが。

現在、このリンク /customer/$searchColumn/$searchTerm?page=4

を使用して特定の顧客を検索しています。

これが私のコントローラーが返すものです

return Inertia::render('ダッシュボード', [
    '顧客' => 顧客::whereLike("nr", (string)$request)->paginate(10),
]);

見つかったすべてのアイテムのページ分割されたテーブルをレンダリングします。

Vue は現在非常にシンプルです:

<pre class="snippet-code-html lang-html prettyprint-override"><code><script setup>
  '@inertiajs/vue3' から { usePage } をインポートします
  '@/mycompany/Pagination.vue' からページネーションをインポートします。
  const page = usePage()
</script></code>

<コード>

フロントエンドでは、以下を使用してテーブルをレンダリングします。

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

<コード>

テーブルの上部に、入力時に結果をリロードする検索ボックスが必要です。

どこから始めればよいかわかりません。

Answer 1

この場合、通常の ajax/fetch リクエストを使用して完了できます。

Inertia は依然としてルーティングに laravel を利用しているため、何らかのリクエストまたはリダイレクトなしにこの種のフォームリクエストを完了することは不可能です。

inertia.js の作成者でも、慣性 による xhr/fetch リクエストの使用をサポートしています。