Buscador

Clase 17 de 20 • Curso de Single Page Applications en Laravel con Inertia y Vue.js

Luis Miguel Gonzalez Giraldo

student•

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:

this.$inertia.get(this.route('notes.index', {q: value}), {}, {preserveState: true})

Julian David Alzate Cuervo

student•

Gracias, me funcionó

Lilibeth Sequeira

student•

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

student•

Muchas gracias

Diego Dominguez

student•

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"

Richard Habith

student•

Falta algo más ? no me funcionó. Al buscar no realiza ninguna acción y tampoco da errores.

Andrés Felipe Perdomo Alvarado

student•

Yo lo solucioné agregando un evento, para que ejecuté la función:

v-model="valor" @keyup="buscar"

Carlos Eduardo Gomez García

teacher•

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

teacher•

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

student•

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.

https://twitter.com/reinink/status/1375756038964715521

Fredy Max Chavez Loyola

student•

Para los que utilizar <script setup> y mejorar un poco la UX del buscador Controller

Note/Index.vue

Jonathan Arzate Juarez

student•

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

student•

Para hacer búsquedas con mínimo 3 caracteres

$q = strlen($request->q) >= 3 ? $request->q : null;
...
->where('excerpt', 'LIKE', "%$q%")

Jorge Bou-saad

student•

Dejo mi commit de Laravel 9 y creo que es el ultimo.

https://github.com/jlbousing/platzi-inertia/commit/0070565ef900c763582f1d272149b10575be6868

Carlos Daniel

student•

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

student•

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

student•

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

student•

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

student•

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

student•

Tengo el mismo error, no entiendo porque

César Santos Lata Jácome

student•

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

student•

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

student•

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>

Pedro Alejandro Montaño Herrera

student•

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

student•

Estoy igual, la consola dice que Inertia.replace() será eliminado en versiones futuras.

Abel da Cunha

student•

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

student•

Hola. A mi me salia el siguiente error:

Uncaught (in promise) TypeError: parent is null

Andres Ospina

student•

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

student•

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

student•

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

student•

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>

David Salvador Martínez Santoyo

student•

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

student•

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

student•

¿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

student•

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.