Crea una cuenta y continúa aprendiendo 🚀

Regístrate o inicia sesión para continuar aprendiendo:

Frontend Aprendiz

List

Veamos cómo usar el componente v-list que nos ofrece Vuetify, para listar los detalles de nuestro carrito de compras.

Problema de visualización en el carrito

Como vemos, los productos del carrito no se visualizan muy bien.

Veamos qué alternativas nos ofrece Vuetify para listar elementos.

Exploración de listas en Vuetify

Usamos el buscador y escribimos list.

Vemos que hay una página que habla acerca de listas. Se encuentra dentro de components.

Hay un componente llamado v-list que nos permite mostrar información.

Ejemplo de v-list

Aquí tenemos un ejemplo:

  • Una lista con tres items.
  • Los items pueden tener avatars o no.
  • Puede funcionar con 2 líneas, con 3 líneas.

En la parte inferior tenemos ejemplos de cómo usar v-list.

Creación de listas con props

Podemos crear los elementos usando props.

  • Se pasa una propiedad items con los elementos a mostrar.
  • items es un arreglo con title y value.
  • Cada item tiene un título que es lo que se muestra.

Creación de listas con markup

Otra forma de usarlo es mediante markup:

  1. Usamos la etiqueta v-list-item.
  2. Dentro, usamos v-list-item-title.

Implementación de v-list

  1. Usamos el componente v-list.
  2. Dentro, creamos varios v-list-item.
  3. Cada v-list-item tendrá un v-list-item-title.
  4. Aplicamos v-for sobre un item en lugar de un <li>.
  5. El título de cada item será producto + cantidad.

Guardamos y vemos los items agregados al carrito.

Agregar value a los items

Al agregar productos, la lista se muestra, pero al pasar el cursor no hay resaltado. Para conseguirlo:

  1. Agregamos un value a cada item.
  2. value será el ID del producto.
  3. Usamos :value="producto.id" para evitar un valor literal.

Al volver al navegador, ya hay resaltado al pasar el cursor sobre cada producto.

Mejorando la visualización del texto

El texto se ve pequeño porque está agregado como texto y no como título.

Para corregirlo:

  1. Movemos el texto a un VCardTitle.
  2. Guardamos los cambios.
  3. Quitamos los dos puntos (:) innecesarios.

Ahora tenemos un título y una lista mejor presentada.

Esta lección no cuenta con recursos adicionales.

Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.

Como vemos, los productos del carrito no se visualizan muy bien. Veamos qué alternativas nos ofrece Vuetify para listar elementos. Entonces usamos el buscador y escribimos list. Vemos que hay una página que habla acerca de listas. Se encuentra dentro de components. Hay un componente llamado v-list que nos permite mostrar información. Aquí tenemos un ejemplo. Tenemos una lista y en su interior tenemos tres items. El ejemplo muestra tres items. Estos pueden tener avatars o no. Si queremos el ejemplo puede funcionar con 2 líneas, con 3 líneas. En la parte inferior tenemos ejemplos de cómo usar este v-list. Aquí tenemos una forma de crear los elementos usando props. Simplemente se le pasa una propiedad items con los items que queremos mostrar. Pero ¿qué es items? Eso lo podemos ver aquí en scripts. Items en este caso es un arreglo que tiene un title y tiene un value. Cada item tiene un título y ese título es lo que se termina mostrando. Esta es una manera de usarlo. Sin embargo también se puede usar markup. Podemos usar la etiqueta v-list-item. Y en su interior usar vue list item title. Entonces vamos a empezar a usar aquí el componente v-list. Vue list. En su interior vamos a crear varios v-list item. Cada v-list item va a contar con un v-list item title. Y entonces nuestro v-for ya no lo vamos a aplicar sobre un li. Sino que lo vamos a aplicar sobre un item. Vamos a crear varios items dentro de esta lista. ¿Y cuál será el título para cada item? Será lo que ya teníamos. ¿Sí? Será el producto seguido de la cantidad. Entonces guardamos y aquí vemos los items que han sido agregados al carrito. Vamos a agregar productos al carrito. Si vemos aquí, nuestra lista se muestra, sin embargo cuando pasamos el cursor no hay ningún resaltado, como se muestra en la documentación. Para conseguir que se muestre ese resaltado tenemos que agregar un valor a cada item. Tenemos que agregar un value. ¿Si? Entonces a cada item le vamos a poner un value. El value en este caso será el ID del producto, ¿si? Esto funciona como una especie de ID, de identificador. Como en este caso no queremos que esto sea un valor literal le vamos a poner aquí unos dos puntos. Al volver al navegador nos encontramos con que ya hay un resaltado, al pasar el cursor sobre cada producto. Sin embargo este texto se sigue viendo muy pequeño. Esto es debido a que esto está agregado como un texto y no como un título. ¿Cómo podemos convertir esto a un título? Nos llevamos este texto y vamos a usar un componente VCardTitle. Guardamos y tenemos esto. Vamos a quitar los dos puntos y ahora tenemos este título y esta lista.

¿Tienes dudas?

Publicar pregunta

¡Comparte conocimiento!

X

Volver al índice

Regístrate

Inicia sesión para llevar un control de tu progreso.

Capítulos

















































49

List











































































Espera un momento 🎁 ...

¿Te gustaría aprender a programar, gratis?

Mago de Programación y más

Sólo debes registrarte 😉.