LaravelのInertia/Vueで最も効率的なデータベース検索メソッドを実装する方法
P粉458725040
2023-08-15 18:05:26
<p>顧客リストを検索してコンポーネントをそのまま変更したいのですが。 </p>
<p>現在、このリンク /customer/$searchColumn/$searchTerm?page=4</p> を使用して特定の顧客を検索しています。
<p>これが私のコントローラーが返すものです</p>
<pre class="brush:php;toolbar:false;">return Inertia::render('ダッシュボード', [
'顧客' => 顧客::whereLike("nr", (string)$request)->paginate(10),
]);</pre>
<p>見つかったすべてのアイテムのページ分割されたテーブルをレンダリングします。 </p>
<p>Vue は現在非常にシンプルです:</p>
<pre class="brush:php;toolbar:false;">
<pre class="snippet-code-html lang-html prettyprint-override"><code><script setup>
'@inertiajs/vue3' から { usePage } をインポートします
'@/mycompany/Pagination.vue' からページネーションをインポートします。
const page = usePage()
</script></code></pre>
<コード>
</code></pre>
<p>フロントエンドでは、以下を使用してテーブルをレンダリングします。</p>
<pre class="brush:php;toolbar:false;">
<pre class="snippet-code-js lang-js prettyprint-override"><code>v-for="$page.props.customers.data の顧客"</code></pre>
<コード>
</code></pre>
<p>テーブルの上部に、入力時に結果をリロードする検索ボックスが必要です。 </p>
<p>どこから始めればよいかわかりません。 </p>
この場合、通常の ajax/fetch リクエストを使用して完了できます。
Inertia は依然としてルーティングに laravel を利用しているため、何らかのリクエストまたはリダイレクトなしにこの種のフォームリクエストを完了することは不可能です。
inertia.js
の作成者でも、慣性 による xhr/fetch リクエストの使用をサポートしています。