Métodos Vue: validar descuentos y carrito

Aprende a crear funcionalidad personalizada en Vue con la Options API: desde métodos para validar códigos de descuento hasta un carrito que gestiona stock y cantidades de forma reactiva. Verás cómo usar this para acceder al contexto, capturar eventos con $event y organizar mejor el código en methods.

¿Cómo crear y usar methods en Vue Options API?

Crear métodos en la Options API permite encapsular lógica y llamar funciones desde el template. Igual que con data, se define la opción methods para centralizar acciones como aplicar descuentos o responder a eventos de teclado.

• Define methods para agrupar funciones reutilizables.
• Usa this para acceder a data, otros methods y estado reactivo.
• Llama métodos desde el template al presionar Enter u otros eventos.
• Mantén el código claro: un método por responsabilidad.

¿Cómo luce la definición básica de methods?

export default {
  data() {
    return {
      // estado reactivo: producto, carrito, etc.
    };
  },
  methods: {
    applyDiscounts() {
      // aplicar el mismo descuento para comprobar el flujo.
      // aquí solo se valida que todo funciona.
    },
  },
};

¿Cómo llamarlo desde el template con Enter?

<!-- Al presionar Enter en el input, ejecuta el método. -->
<input type="text" @keyup.enter="applyDiscounts" placeholder="Código de descuento" />

¿Cómo validar códigos de descuento con $event y arrays?

Para una validación real, define un arreglo de discount codes en data y captura el valor del input con $event. Con event.target.value obtienes el texto y con findIndex decides si el código existe. Si existe, aplicas el descuento y eliminas el código para evitar usos múltiples.

• Define discountCodes como arreglo de cadenas.
• Usa $event para recibir el objeto del evento.
• Emplea event.target.value para leer el input.
• Valida con findIndex y elimina con splice si ya se usó.

¿Cómo capturar el valor del input y validar?

export default {
  data() {
    return {
      discountCodes: ["Plati", "Plati veinte", "Diego Samuel"],
    };
  },
  methods: {
    applyDiscounts(event) {
      const input = event.target.value;
      const index = this.discountCodes.findIndex(code => code === input);
      if (index >= 0) {
        // aplicar el descuento solo si el código existe.
        // ... lógica de descuento ...
        // eliminar el código para impedir usos repetidos.
        this.discountCodes.splice(index, 1);
      }
    },
  },
};

<!-- Pasa el evento completo al método con $event. -->
<input type="text" @keyup.enter="applyDiscounts($event)" />

¿Cómo agregar al carrito y manejar stock y quantity reactivamente?

Crea un método addToCart que añada el producto actual al arreglo carrito. Evita duplicados con findIndex: si ya existe, incrementa quantity; si no, haz push con quantity: 1. Actualiza el stock con -=. Gracias a la reactividad de Vue (vía proxy), los cambios se reflejan en todas las vistas donde se usa el estado.

• Usa push para insertar nuevos elementos en el carrito.
• Evita duplicados comparando por product.name con findIndex.
• Maneja quantity para sumar unidades del mismo producto.
• Disminuye stock siempre que agregas al carrito.
• Muestra quantity en el template y el contador con cart.length.

¿Cómo implementar addToCart con control de duplicados?

export default {
  data() {
    return {
      product: { name: "Producto X", stock: 10 },
      cart: [],
    };
  },
  methods: {
    addToCart() {
      const index = this.cart.findIndex(p => p.name === this.product.name);
      if (index >= 0) {
        this.cart[index].quantity += 1;
      } else {
        this.cart.push({ ...this.product, quantity: 1 });
      }
      this.product.stock -= 1;
    },
  },
};

¿Cómo vincular el botón y mostrar cantidades en el template?

<!-- Evento de clic para agregar al carrito. -->
<button @click="addToCart">Agregar al carrito</button>

<!-- Mostrar cada ítem con su quantity. -->
<li v-for="p in cart" :key="p.name">
  {{ p.name }} ({{ p.quantity }})
</li>

<!-- Contador de elementos en el carrito. -->
<span>{{ cart.length }}</span>

Conceptos clave explicados: methods, this y contexto reactivo; manejo de eventos con $event; acceso a event.target.value; operaciones de arreglo con findIndex, push y splice; control de stock y quantity; efecto de la reactividad tipo proxy; integración en el template con eventos de Enter y click. A continuación, se propone replicar esta lógica con la Composition API.

¿Tienes dudas o quieres compartir cómo gestionas descuentos y carrito en Vue? Cuéntalo en los comentarios.