Jetstream Inertia Vuejs

Trying to implement search in the Customers.vue page. It works, but loses focus after each entry. Also getting a 409 error

CustomerController

``public function index(Request $request): Response { $search = $request->input('search'); $customers = Customer::query() ->when($search, function ($query, $search) { $query->where('first_name', 'like', '%' . $search . '%'); }) ->paginate(15); $customers->appends(['search' => $search]); return Inertia::render('Customers/Index', [ 'customers' => $customers, ]); }''

Customer route

Route::get('/customers', [CustomerController::class, 'index'])->name('customers');

Customer.vue

<input type="text" name="search" id="search" placeholder="Search..." v-model="search"/>

Customer

let search = ref(''); watch(search, (value) => { Inertia.get('/customers', { search: value } , { preserveState: true, }); });

tykus

2 years ago

Best Answer

Level 104

This is a basic partial reload scenario; you can use the router from Inertia instead; and also, you can pre-populate the input from the query string:

import {router} from "@inertiajs/vue3";

let queryParams = new URLSearchParams(window.location.search)
let search = ref(queryParams.get('search') || '')

watch(search, (value) => router.reload({only: ['customers'], data: {search: value}}))

flourgirl

2 years ago

Level 1

@tykus Fantastic! It works. I'll have to study it awhile to see why though...

I'm curious - the code I was using was from a Jeffrey Way's youTube tutorial. The only difference is that I'm using Jetstream - is there something in Jetstream that would make it not work that way?

tykus

2 years ago

Level 104

@flourgirl I don't know which version of Inertia might have been used in that series compared with your version now; however, it is not likely that Jetstream had any influence on the outcome.

If you're all set, please mark the thread closed with a Best Reply above.

Please or to participate in this conversation.