• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

146
Vistas
Pase el índice seleccionado del objeto que reside fuera de un bucle v-for en Vue 3

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>
about 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

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"

tu demostración

about 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda