Laravel + Inertia Vue3 - Filter results

What would be the best way to create a system that filters the results, for example

Search By keyword
Sort By Popularity

and so on, but it should be done with inertia, do you guys have any examples? I have the fronte-end already finished, so what I am asking is how should i build the request in the most optimized way possible

EDIT: I want the results in real time without refresh

aleahy

3 years ago

Best Answer

Level 25

You will want to bind to the change event of your search field and sort field or watch v-models to update a query string and reload the page. Yes I know you want it to not refresh, but that is what Inertia is designed to do. You're still going to have to make a request to the backend for the data.

So the key is to use the router.get method, where you can put the currrent url, with the query string as the data, and set the preserveState and preserveScroll to true in the options. These two options will help make things look like the page is dynamically updating. To be efficient you should be using partial reloads - set an only attribute in the options as well. (https://inertiajs.com/partial-reloads).

In the example below, I'm only doing the search field and assuming your data is coming from a products attribute in the backend. I use the debounce method on lodash to debounce keyboard input.

<input type="search" v-model="searchField" >

const searchField = ref(''); //Should really load it from the query string

const url = route('products.index');

watch(searchField, debounce(() => {
	router.get(url, {searchField: searchField.value}, {preserveState: true, preserveScroll: true, only: ['products']}
}, 300));

In practice I put this inside a reactive composable so I can apply it to multiple tables.

2 likes

Kris01

3 years ago

Level 3

@aleahy Hey thanks for this response, everything seems to be working fine, but I just have one quesiton. There is a double request each time I filter something, an my suspicion is that the second request starts when inside the controller i do the

return inertia::render

I tried stopping before the controller before the render and there was only one request, if I let it go through there appears another indentical request.

Could that be?

aleahy

3 years ago

Level 25

@Kris01 I would look through and see all the places you make the request. If you've got watchers, maybe they're being triggered on two separate events. Even setting a value to the same value will trigger a watcher.

1 like

Please or to participate in this conversation.