Eventos con v-on en templates de Vue

Potencia la interacción en Vue.js agregando eventos directamente en el template. Con v-on, su atajo con arroba y modificadores de teclado, logras una experiencia fluida: se actualiza el estado, cambian imágenes y el stock responde de forma reactiva sin código extra en el DOM.

¿Cómo activar interacciones con eventos en Vue?

Para escuchar acciones del usuario en elementos HTML se usa la directiva v-on. Puedes pasar cualquier event de JavaScript y una expresión en línea que cambie el estado de tu componente. Así, todo lo ligado a ese estado se actualiza gracias a la reactividad.

• Usa v-on para escuchar mouse over o click.
• Escribe expresiones simples para un toggle de variables booleanas.
• Observa cómo cambian dependencias y efectos asociados al estado.

¿Qué hace v-on con expresiones en línea?

Ejecuta la expresión cuando ocurre el event. Por ejemplo, abrir o cerrar un modal del carrito al pasar el ratón o al hacer click.

<!-- Alternar el carrito con *mouse over* -->
<button v-on:mouseover="cartOpen = !cartOpen">Carrito</button>

<!-- Más usable: alternar con *click* -->
<button v-on:click="cartOpen = !cartOpen">Carrito</button>

¿Cuál es el atajo de eventos con arroba?

Vue ofrece un shortcut para v-on: usa @ seguido del nombre del event.

<button @click="cartOpen = !cartOpen">Carrito</button>

¿Cómo renderizar imágenes dinámicas con thumbnails?

El binding dinámico en atributos permite mostrar la imagen activa del producto. Conecta la fuente al arreglo de imágenes y cambia el índice activo al hacer click en un thumbnail.

• Conecta :src a product.images[activeImage].image.
• Usa :alt con product.name.
• Cambia activeImage en el click de cada thumbnail.

<!-- Imagen principal dependiente del índice activo -->
<img :src="product.images[activeImage].image" :alt="product.name" />

<!-- En cada *thumbnail*, cambia la imagen activa -->
<button @click="activeImage = index">Miniatura</button>

Claves técnicas: - product.images es un arreglo de objetos con la propiedad image. - activeImage determina qué objeto del arreglo se muestra. - Al cambiar activeImage, la UI se actualiza de forma reactiva.

¿Cómo usar eventos de teclado y estado de stock?

Además de click, puedes escuchar teclas específicas con modificadores. El modificador .enter ejecuta lógica solo cuando se presiona esa tecla en un input. También, las estructuras de control en el template evitan mensajes confusos según el stock.

• @keyup.enter ejecuta una acción solo con la tecla enter.
• Reducir precio con una expresión directa es válido en v-on.
• Deshabilita el botón cuando el stock sea 0 para evitar acciones inválidas.
• Ajusta mensajes con v-if y v-else-if según product.stock.

<!-- Descuento al presionar enter en el *input* de código -->
<input @keyup.enter="product.price = product.price * 0.5" placeholder="Código de descuento" />

<!-- Agregar al carrito: descuenta del *stock* y deshabilita si no hay -->
<button @click="product.stock -= 1" :disabled="product.stock === 0">
  Agregar al carrito
</button>

Para mensajes dependientes del stock, evita mostrar textos que no correspondan. Agrega una condición específica cuando product.stock sea 1 con v-else-if para controlar con precisión qué se ve y qué no.

<!-- Ejemplo de control fino de mensajes según *stock* -->
<p v-if="product.stock >= 3">Quedan varias unidades.</p>
<p v-else-if="product.stock === 2">Quedan 2 unidades.</p>
<p v-else-if="product.stock === 1">Queda 1 unidad.</p>
<!-- Sin v-else para no mostrar nada cuando *stock* es 0 -->

Habilidades y conceptos reforzados: - Manejo de eventos con v-on y atajo @ para click, mouse over y teclado. - Expresiones en línea en eventos para cambios inmediatos de estado. - Reactividad: cambios en cartOpen, activeImage, price y stock actualizan la UI. - Binding dinámico en atributos (:src, :alt, :disabled). - Estructuras de control en el template con v-if y v-else-if para mensajes coherentes.

¿Te gustaría ver otras combinaciones de eventos o más ejemplos con modificadores de teclado? Cuéntame en qué parte te gustaría profundizar.