Estoy creando un carrito de compras simple en Vue 3 con fines de aprendizaje.
Hasta ahora, he configurado todo, desde el objeto de products
hasta la funcionalidad addToCart()
, y todo funciona dentro de un bucle v-for
.
El problema es que necesito mostrar el título del producto dentro de una alerta que reside fuera del bucle v-for
y no tengo idea de cómo hacerlo en Vue.
Intenté emit
y provide
pero no funciona. Puedo enviar el objeto completo al componente secundario Alert.vue
a través de provide
pero eso no es útil ya que solo necesito obtener el índice actual del producto seleccionado para poder obtener su título.
Puede ver una demostración aquí https://codesandbox.io/s/vue-cart-54ioqt?file=/src/App.vue
Intente agregar un producto al carrito dos veces y verifique la Alerta. En este momento, muestra el objeto del carrito completo, pero solo necesito obtener el title
del producto para que la alerta diga You have already added {product.title} to your cart
aplicación.vue
export default { name: 'App', components: { CartAlert }, data() { return { products: [ {id: 1, title: 'Samsung A70', price: 50}, {id: 2, title: 'Kindle Reader', price: 50}, {id: 3, title: 'Meta Quest 2', price: 100}, {id: 4, title: 'LG LED 43" TV', price: 200}, ], discountInput: '', discountValid: false, cart: [], total: '', alreadyAddedToCart: false } }, methods: { addToCart(index) { if (this.cart.includes(this.products[index])) { this.alreadyAddedToCart = true } else { this.cart.push(this.products[index]) } }, }, provide() { return { cart: this.cart } } }
Alert.vue
(componente secundario)
<template> <div id="alert" class="alert alert-danger alert-dismissible fade show" role="alert"> You have already added this {{ cart }} to your cart. <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" @click="$emit('dismissAlert')"></button> </div> </template> <script> export default { name: "CartAlert", props: ['product'], inject: ['cart'], mounted() { console.log() } } </script>
Puede mostrar su product
de utilería en el componente Carrito:
You have already added this {{ product }} to your cart.
En la aplicación, agregue item
a la función de datos:
item: null
en el método, agregue el título a esa propiedad de datos:
this.item = this.products[index].title this.alreadyAddedToCart = true;
en la plantilla, vincule su propiedad al item
:
:product="item"