Conditional rendering

Conditional Rendering
Membretando el comentario:

• Un `v-if, posee costos de renderizado al estar alternando obligando a vue caer en un proceso de actualización.
• Un v-show, posee costos de renderizado al inicio pero minimizados por una precarga de la condicional.

Además, de que en un proceso de renderizado con v-if, pega en el proceso de destrucción de los elementos ocasionando que el perfomarce de la aplicación se vea afectada, cuando sea estresada.

Por último, eviten utilizar v-ifcon un v-for en una misma línea de declaración por ahorrase código. link

CONDICIONALES - STATUS

Sugiero poner de esta manera los estados de los productos.
ya que se pones 100 unidades en stock sigue diciendo “Ultima unidad disponible”

y mostrar en pantalla el valor stock, para informar cuantas unidades quedan disponibles.

<div class="description__status" v-if="product.stock >= 3"> Disponible!</div>
                <div class="description__status" v-else-if="product.stock === 2"> El producto está por terminarse.</div>
                <div class="description__status" v-else-if="product.stock === 1"> La ultima unidad disponible!.</div>
                <div class="description__status" v-else>No hay productos disponibles!.</div>

saludos!!

V-show: Útil para aquellos elementos que tienen que existir en el DOM, pero simplemente tienen que ocultarse mediante algún estilo cuando no lo requiramos.

V-if: Útil para Eliminar por completo el elemento del DOM y viene bien para los elementos que no necesitemos que esten ejecutandose todo el tiempo en el navegador.

**Los conditional rendering **
Son directivas de Vue js con la cual establecemos si un componente se muestra o no en base a una condición.

v-show: si la condición se cumple su display será igual a initial, sino será none. Lo que hace esta es ocultar o mostrar un componente. No podemos usar v-else o v-else-if con esta directiva

v-if: si la condición se cumple se renderiza el elemento de lo contrario se elimina el elemento del dom.
Podemos usar v-else o v-else-if con esta directiva.

Cuando usarlas?: (opinión personal)
-Si el elemento se mostrará constantemente mejor usar v-show , estar usando las funciones del dom para eliminar o insertar un componente es más costoso en performance que un display: none.

-Si el elemento se va a mostrar según la información de una API: la info será la misma? usar v-show : usar v-if.

nota: no soy un experto es la mera opinión de un novato y acepto sugerencias 😉

Hay un problema de lógica en las condiciones que pones, pues al estar igualadas literalmente:

• product.stock === 3
• product.stock === 2

tienes el problema de que cuando el stock no sea ni 3 ni 2, se active automáticamente el else, por eso vemos que cuándo el stock es igual a 0, aún así muestra el mensaje de Última unidad disponible!

Lo correcto sería cambiar el v-else por un v-else-if: product.stock === 1

Hay que tener resiliencia en este curso, la verdad estuve a punto de desertar al no entender la parte de meta programación, ahora quiero seguir viendo las clases, se puso mucho más interesante ahora.

No sé ustedes pero siento que al botón de agregar al carrito le falta vida.
Le agregué este sencillo estilo:

main .description button:hover {
  background: rgb(50, 1, 143);
  cursor: pointer;
}