El replace será removido en proximas versiones. Para ello recomiendan usar get. Para evitar que el componente se cargue de nuevo se puede usar el get de la siguiente manera:
Para aquellos que usan setup de acuerdo a las ultimas actualizaciones de vue e inertia, el script queda así
importAppLayoutfrom'@/Layouts/AppLayout.vue'import{ ref, watch }from'vue'import{ router,Link}from'@inertiajs/vue3'defineProps({notes:{type:Array,default:[]}})const q =ref('');watch(q,(value)=>{ router.get(route('notes.index',{q: value }),{},{preserveState:true});});
Muchas gracias
Para quien use al sintaxis <script setup>
<script setup>importAppLayoutfrom'@/Layouts/AppLayout.vue';import{Link}from'@inertiajs/inertia-vue3';import{ ref }from'vue';import{Inertia}from'@inertiajs/inertia'defineProps({notes:Array});const valor =ref(null)constbuscar=()=>{let q= valor.value;Inertia.get(route('notes.index',{q}),{},{preserveState:true});};</script>
y en v-model
v-model="valor"
Falta algo más ? no me funcionó. Al buscar no realiza ninguna acción y tampoco da errores.
Yo lo solucioné agregando un evento, para que ejecuté la función:
v-model="valor" @keyup="buscar"
Interesante lo de replace 🤔 Pero algo que me parece aún más interesante es que esto también ayuda al SEO, ya que al poner una query en la URL estás generando una nueva página por cada búsqueda diferente que puede haber, y Google te puede arrojar la página personalizada con los resultados de esa búsqueda, es decir, cuando Google hace un query hacia cualquier búsqueda que pueda existir en nuestra página, el sistema Laravel ya sabe que tiene reaccionar con ese query y devolverá el HTML ya listo con los resultados, y eso es posible que lo indexe Google, por eso el SSR es importante 👀
UPDATE: Inertia no soporta SSR:( Solo es útil para conectar las rutas y controladores de Laravel con Vue, más información sobre ello acá:
.
https://inertiajs.com/server-side-rendering
.
Si desean una alternativa SSR para Vue pueden usar Nuxt.js que es la librería oficial de Vue para SSR (aunque Laravel igual tiene opciones)
Ya **Inertia ** está progresando en cuanto a SSR.
Esté proyecto llego para quedarse muchísimos años. gigante la manera como está creciendo, hay que ponerle **OJO ** a eso.
Para los que utilizar <script setup> y mejorar un poco la UX del buscador
Controller
Note/Index.vue
para que no tengas que usar el timer, remplaza el get que usas con router y usa replace. pero igual increíble aporte!
Inertia replace será eliminada amigos
Inertia.replace() has been deprecated and will be removed in a future release. Please use Inertia.get() instead.
No conviene hacer una búsqueda sobre el array notes en javascript, en lugar de hacer una consulta a la base de datos?
Claro que es conveniente hacerlo como dices, es una mejor practica y estarías haciendo un request menos, y dependiendo de la cantidad de registros que estés consumiendo obtienes una mejora a nivel de performance significativa. Pero en este caso era algo didáctico para explicar los concepto de inertia.
Normalmente utilizaríamos paginación para mostrar ciertos registros a la vez, de tal forma, que al buscar en el array del frontend podría ayudar al performance pero no sería una búsqueda entre todos los registros.
Buen día, tengo el siguiente error, al momento de hacer el filtro por cierta palabra me aparecen los datos de manera correcta, pero al momento de borrar la palabra para ingresar otra diferente me aparece el siguiente error.!
Tengo el mismo error, no entiendo porque
Hola. A mi me salia el siguiente error:
Uncaught (in promise) TypeError: parent is null
Lo que agregue para que deje de salir el error y evitar que el sistema se caiga, fue agregar lo siguiente al componente <app-layout> quedaría algo así como <app-layout v-bind:q="q"> tal vez te sirva
Esta clase costo trabajo, maxime cuando no se conoce la sintaxis de vue3.
.
Pero he logrado hacer dos tipos de busquedas, con base en comentarios y buscando documentacion en la web, les comparto:
.
Actualmente esta parte no funciona bn, alguno ya ha hecho un buscador con esta tecnología o de otra manera sin tener que hacer una consulta en la base de datos?
Estoy igual, la consola dice que Inertia.replace() será eliminado en versiones futuras.
Cuando hago una búsqueda y comienzo a borrar caracteres en el input me devuelve el error:
Uncaught (in promise) TypeError: Cannot set property 'textContent' of null
Hola. A mi me salia el siguiente error:
Uncaught (in promise) TypeError: parent is null
Lo que agregue para que deje de salir el error y evitar que el sistema se caiga, fue agregar lo siguiente al componente <app-layout> quedaría algo así como <app-layout v-bind:q="q"> tal vez te sirva
tengo un problema con el buscador, cuando escribo la excerpt que quiero buscar lo hace bien, pero cuando borro para buscar otra, me sale error!
si alguien mas tiene este problema, lo solucione agrando al princiopio del index de la carpeta vue en <app-layout v-bind:q="q"></app-layout> el v-bind:q="q"
Usando composition api de vue, dentro de <script setup>
Tengo un problema al borrar caracteres del buscador no funciona, deja de hacer el filtrado y deja de funcionar
Hola. Lo que agregue para que deje de salir el error y evitar que el sistema se caiga, fue agregar lo siguiente a <app-layout> quedaría algo así como <app-layout v-bind:q="q"> me costó 30 minutos encontrar la solución
