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>