Bagaimana untuk melaksanakan kaedah carian pangkalan data yang paling cekap dalam Inertia/Vue Laravel

Question

Saya mahu mencari senarai pelanggan dan menukar komponen seperti sedia ada.

Saya sedang mencari pelanggan tertentu menggunakan pautan ini /customer/$searchColumn/$searchTerm?page=4

Inilah yang dipulangkan oleh pengawal saya

return Inersia::render('Dashboard', [
    'pelanggan' => Pelanggan::whereLike("nr", (rentetan)$request)->halaman(10),
]);

Memberikan jadual bernombor semua item yang ditemui.

Vue pada masa ini sangat mudah:

<pre class="snippet-code-html lang-html prettyprint-override"><code><persediaan skrip>
  import { usePage } daripada '@inertiajs/vue3'
  import Penomboran daripada '@/mycompany/Pagination.vue';
  halaman const = usePage()
</skrip></kod></pra>
<kod>
</code>

Di bahagian hadapan, saya memaparkan jadual menggunakan:

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

Saya mahukan kotak carian di bahagian atas jadual yang memuatkan semula keputusan semasa saya menaip.

Saya tidak tahu dari mana hendak bermula.

Answer 1

Untuk kes ini, anda boleh melakukannya menggunakan permintaan ajax/fetch biasa.

Inersia masih menggunakan laravel untuk penghalaan, jadi mustahil untuk melengkapkan permintaan borang seperti ini tanpa beberapa jenis permintaan atau ubah hala.

Malah pencipta inertia.js menyokong menggunakan permintaan xhr/fetch dengan inersia .