Ocultar badge y asignar color

Revisando la documentación de Vuetify vemos que este componente v badge tiene una propiedad llamada model value. Esta propiedad model value recibe un valor booleano y por defecto tiene como valor true. Esto hace que siempre se muestre. Si nosotros queremos que el badge no se muestre tenemos que pasarle un valor false a esta propiedad. Entonces aquí a la etiqueta v badge así como pasamos un content con la cantidad de items, pasamos también una propiedad model value, y aquí ponemos una expresión. Si items count es mayor que 0, se mostrará. De caso contrario no lo hará. Y el efecto que conseguimos es este de acá. No hay ningún badge pero en el instante en que nosotros agregamos un producto, aparece el badge con la cantidad correspondiente, ¿sí? Hay más cosas que se pueden personalizar sobre este badge. Por ejemplo también soporta una propiedad llamada color y esta propiedad acepta utility colors. Por ejemplo success o purple, ¿sí? También acepta colores css, en este formato, en hexadecimal, y como rgba. Vamos a esta página de colores para ver qué opciones tenemos disponibles. Según nos dice podemos pasar estos valores y se mostrará de tal manera. Hagamos una prueba por ejemplo y pasemos "teal". Entonces vamos a definir por aquí color "teal". Si actualizamos vemos que se está usando ya dicho color, ¿sí? Vamos a probar ahora con success, y el color es de esta otra manera. Entonces es cuestión de encontrar alguno que queramos. Yo creo que podríamos usar el mismo que usamos para el botón que dice agregar al carrito, de tal manera que no introduzcamos muchos más colores. Entonces nos vamos a Product Cart y vemos que este botón de agregar al carrito está usando el color Orange Lighten 2. Es un anaranjado claro. Entonces ese mismo color le vamos a aplicar aquí al v-badge. Probablemente te estés preguntando, ¿por qué aquí hay unos dos puntos para content? Hay unos dos puntos para model value, pero no hay dos puntos para color. Como ya hemos mencionado en lecciones anteriore,s los dos puntos se usan para evaluar expresiones de JavaScript. Por ejemplo content. No queremos que el content diga "items count". Queremos que el content evalúe "items count". Por ejemplo, si nosotros quitamos los dos puntos, esto va a seguir funcionando, pero no se va a evaluar esta expresión, sino que se va a considerar como un valor literal. Y entonces se mostrará "items count" escrito. Como items count, para nosotros es una variable y queremos que se evalúe, ponemos los dos puntos. Esta es una expresión de JavaScript con una condición, queremos que se evalúe, por lo tanto ponemos los dos puntos. En cambio para el color, nosotros estamos proporcionando el valor directamente, no hay ninguna expresión JavaScript a evaluar. Por lo tanto ponemos "color", y directamente el valor que queremos, sin evaluar nada porque aquí no hay variables. Entonces esto es el resultado que conseguimos.

¡Suscríbete y continúa aprendiendo!

Ocultar badge y asignar color