[Vuejs]-Vue Inertia watcher in search input

by

0👍

It appears that you’re trying to monitor the search value and call a callback function every time the search value changes. When using the watch function with "replace: true", it indicates that the response from the server should replace the current page content instead of appending to it, thus lead to the full page reload every time the the search value changes.
To achieve your goal to prevent the page form reloading and only make the request after you finish typing, consider adding a delay mechanism.

let delayTimeout;

 watch(search, value => {
   clearTimeout(delayTimeout);

   delayTimeout = setTimeout(() => {
     Inertia.get('users', {
     search: value,
   }, {
     preserveState: true,
     replace: true,
   });
 }, 500); // Adjust the debounce delay (in milliseconds) as needed
})

0👍

I stumbled upon this forum looking for a solution to the same thing. Luckily I followed the documentation and found the right way to do it. The only thing you have to do is to import router instead of Inertia.

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

watch(search, (value) => {
    router.get("/users", { search: value }, { preserveState: true });
});

Greetings…

Leave a comment