List

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.

Crea una cuenta y continúa aprendiendo 🚀

List