Lilibeth Sequeira
Para aquellos que usan setup de acuerdo a las ultimas actualizaciones de vue e inertia, el script queda así
import AppLayout from '@/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 } ); });
Josselyn Sanchez Sanchez
Muchas gracias
Diego Dominguez
Richard Habith
Falta algo más ? no me funcionó. Al buscar no realiza ninguna acción y tampoco da errores.
Andrés Felipe Perdomo Alvarado
Yo lo solucioné agregando un evento, para que ejecuté la función:
v-model="valor" @keyup="buscar"
Carlos Eduardo Gomez García
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 👀
Carlos Eduardo Gomez García
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)
Francisco Hernandez
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.
Fredy Max Chavez Loyola
Para los que utilizar <script setup> y mejorar un poco la UX del buscador Controller
Jonathan Arzate Juarez
para que no tengas que usar el timer, remplaza el get que usas con router y usa replace. pero igual increíble aporte!
Andrés Felipe Perdomo Alvarado
Para hacer búsquedas con mínimo 3 caracteres
$q = strlen($request->q) >= 3 ? $request->q : null; ... ->where('excerpt', 'LIKE', "%$q%")
Jorge Bou-saad
Dejo mi commit de Laravel 9 y creo que es el ultimo.
https://github.com/jlbousing/platzi-inertia/commit/0070565ef900c763582f1d272149b10575be6868
Carlos Daniel
Inertia replace será eliminada amigos Inertia.replace() has been deprecated and will be removed in a future release. Please use Inertia.get() instead.
Lucas Durán
No conviene hacer una búsqueda sobre el array notes en javascript, en lugar de hacer una consulta a la base de datos?
Carlos Eduardo Bermúdez Sanchez
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.
Luis Aguilar Espinoza
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.
POLICIA NACIONAL DEL PERU DIRECCION DE INTELIGENCIA
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.!
Jose Miguel Nieves
Tengo el mismo error, no entiendo porque
César Santos Lata Jácome
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
Alvaro Huaysara Jauregui
Usando composition api de Vue
<script setup> import AppLayout from '@/Layouts/AppLayout.vue'; import { router } from '@inertiajs/vue3'; import { Link } from '@inertiajs/vue3'; import { ref, watch } from 'vue'; defineProps({ notes: Array }); const q = ref(''); watch(q, (value) => { router.get(route("notes.index", { q: value }), {}, { preserveState: true }); }); </script>
Kenneth Angulo L
Pedro Alejandro Montaño Herrera
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?
Carlos Daniel
Estoy igual, la consola dice que Inertia.replace() será eliminado en versiones futuras.
Abel da Cunha
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
César Santos Lata Jácome
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
Andres Ospina
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!
Andres Ospina
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"
Alvaro Huaysara Jauregui
Usando composition api de vue, dentro de <script setup>
import AppLayout from '@/Layouts/AppLayout.vue'; import { router } from '@inertiajs/vue3'; import { Link } from '@inertiajs/vue3'; import { ref, watch } from 'vue'; defineProps({ notes: Array }); const q = ref(''); watch(q, (value) => { router.get(route("notes.index", { q: value }), {}, { preserveState: true }); });
Alvaro Huaysara Jauregui
David Salvador Martínez Santoyo
Tengo un problema al borrar caracteres del buscador no funciona, deja de hacer el filtrado y deja de funcionar
César Santos Lata Jácome
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
Mauricio Acevedo Rueda
¿Como podría cambiar la consulta en laravel con REGEXP (https://dev.mysql.com/doc/refman/8.0/en/regexp.html), estoy teniendo problemas de rendimiento de consultas con eloquent? Gracias
Blanca Segura Garcia
Una pregunta e inquietud ... Cómo puedo obtener el resultado de la búsqueda con "resaltado"? Tal vez alguien lo ha hecho y le ha resultado.
Para quien use al sintaxis <script setup>
<script setup> import AppLayout from '@/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) const buscar = () => { let q= valor.value; Inertia.get(route('notes.index', {q}), {}, {preserveState: true}); }; </script>
y en v-model
v-model="valor"
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: .
++Buscar reaccionando a cada cambio del input:++
<script setup> import AppLayout from '@/Layouts/AppLayout.vue'; import { Head, Link } from '@inertiajs/inertia-vue3'; import { Inertia } from'@inertiajs/inertia'; import { ref } from "vue"; defineProps({ notes: Array }); let search = ref(''); watch(search, (value) => { Inertia.get(route('notes.index', {search: value}), {}, {preserveState: true}); }); </script> <template> ... <input type="text" v-model="search" placeholder="Busca realtime..."/> ... </template>
++Buscar, reaccionando al presionar el boton enter:++
<script setup> import AppLayout from '@/Layouts/AppLayout.vue'; import { Head, Link } from '@inertiajs/inertia-vue3'; import { Inertia } from'@inertiajs/inertia'; import { ref, watch } from "vue"; defineProps({ notes: Array }); let input = ref(''); const buscar = () => { let busqueda = input.value; Inertia.get(route('notes.index', {busqueda}), {}, {preserveState: true}); }; </script> <template> ... <input type="text" v-model="input" @keyup.enter="buscar" placeholder="Escribe busqueda y enter" /> ... </template>
Usando composition api de Vue
<script setup> import AppLayout from '@/Layouts/AppLayout.vue'; import { router } from '@inertiajs/vue3'; import { Link } from '@inertiajs/vue3'; import { ref, watch } from 'vue'; defineProps({ notes: Array }); const q = ref(''); watch(q, (value) => { router.get(route("notes.index", { q: value }), {}, { preserveState: true }); }); </script> ```\<script setup>import AppLayout from '@/Layouts/AppLayout.vue';import { router } from '@inertiajs/vue3';import { Link } from '@inertiajs/vue3';import { ref, watch } from 'vue'; defineProps({ notes: Array}); *const* q = ref(''); watch(q, (value) => { router.get(route("notes.index", { q: value }), {}, { preserveState: true });}); \</script>
