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><스크립트 설정>
  '@inertiajs/vue3'에서 { usePage } 가져오기
  '@/mycompany/Pagination.vue'에서 페이지 매김을 가져옵니다.
  const 페이지 = usePage()

<코드>

<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>

<코드>

입력할 때 결과를 다시 로드하는 검색창을 표 상단에 두고 싶습니다.

어디부터 시작해야 할지 모르겠습니다.

Answer 1

이 경우 일반 ajax/fetch 요청을 사용하여 수행할 수 있습니다.

Inertia는 여전히 라우팅을 위해 laravel을 활용하므로 일종의 요청이나 리디렉션 없이는 이러한 종류의 양식 요청을 완료하는 것이 불가능합니다.

inertia.js 작성자도 관성이 있는 xhr/fetch 요청 사용을 지원합니다.