Como Crear un Buscador en Tiempo Real con Vue JS 2.6.11 (Buscador de Pokemones) – Parte 1

Vue JS | | Comunidad: Crear un Post, Eventos Devs, Foro

Demo

Un proyecto web muchas veces necesita de un buscador, sobre todo los proyectos que tienen muchos registros como las tiendas en línea que suelen contar con muchos productos que los usuarios pueden adquirir y este buscador les facilita a los usuarios el encontrar rápidamente un producto o artículo, una forma práctica y rápida de buscar registros podría ser una búsqueda en tiempo real, esto lo podemos desarrollar con diferentes librerías y frameworks, para este tutorial usaré Vue JS con el cual crearé un buscador de pokemones, vamos con ello.

Partes

  • Parte 1
  • Parte 2 (Final – Código fuente en GitHub)


Antes de continuar, te invito a leer los siguientes artículos:

Asimismo te invito a escuchar el Podcast: “Que Hacer Cuando Estamos En Casa”:

Spotify: Sound Cloud:

Bien ahora continuemos con el Post: Como Crear un Buscador en Tiempo Real con Vue JS 2.6.11 (Buscador de Pokemones) – Parte 1.

Comenzaré creando un nuevo proyecto con Vue JS, ejecuto el siguiente comando para crearlo.

A mi proyecto le puse de nombre buscador-tiempo-real-vuejs, tu le puedes coloca el nombre que desees.

Componente Pokemones

Nuestra vista HTML va tener un buscador, yo suelo usar Bootstrap 4 para la mayoría de mis proyectos, ya que me permite crear rápidamente los elementos de mi vista HTML, así solo me enfoco en el proceso o la lógica del proyecto.

En Vue JS podemos hacer uso del elemento <template></template> en donde podemos crear la vista de un determinado componente, voy a crear un componente llamado Pokemones, este componente lo crearé en src > components > Pokemones.vue

Abro el archivo Pokemones.vue y agrego en primer lugar una caja de búsqueda.

Si ves estoy haciendo uso de la directiva v-model con el valor buscar, el cual nos permite crear un enlace bidireccional que vincula el término de búsqueda que el usuario ingrese en la caja de texto o buscador.

Cada item o pokemon lo pondré en un componente Card de Bootstrap 4 el cual tendrá una imagen, nombre, tipo, fortaleza y debilidad del pokemon.

Ya que lo pokemones los tengo en un archivo JSON, hago un recorrido de este archivo con la directiva v-for y los muestro dentro de un componente Card de Bootstrap 4.

Entonces si voy al navegador, debería de ver la vista HTML de la siguiente manera.

Este sería el código completo de la vista dentro del elemento <template></template> de Vue JS.

Con esto entonces tenemos lista nuestra vista HTML.

En el mismo componente Pokemones vamos hacia abajo hasta el elemento <script></script> e importo mi archivo pokemones.json que contiene los datos de los pokemones.

Luego exporto el componente Pokemones, dentro de la función data() creo la variable buscar, por último en computed creo el método items() en donde leo los datos de los pokemones y cuando el usuario realice una búsqueda, estos datos se filtren con el método filter()

A continuación te comparto el contenido del archivo pokemones.json 

Bien hasta aquí esta primera parte de tutorial, hemos creado un nuevo proyecto en Vue JS, también creamos el componente Pokemones con su vista HTML y su código Vue JS correspondiente.

Ten Paciencia, lo que quiero es que entiendas todo el proceso para Crear este Proyecto y no llenarte el capitulo de mucho contenido porque te puedes marear y no tendrás un óptimo aprendizaje. 

Nota(s)

  • En el siguiente capitulo continuaremos con la integración y configuración de TypeScript en Node JS.
  • Los pasos y el código compartido en este capitulo del tutorial pueden cambiar, quedar obsoleto o continuar, esto no depende de nosotros, si no de la empresa que da soporte a Vue JS, que suelen cambiar sus códigos y pasos de configuración en futuras versiones.
  • No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo. 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required
Subscribirse
Notificar a
guest
2 Comments
antiguos
nuevos más votado
Inline Feedbacks
View all comments
Santiago
Santiago
14 días atrás

Hola muy buen muy trabajo tu tutorial me sirvió de mucho.