Referencia de objeto UUID clave para productos en VueJS

Question

Hola chicos he creado un objeto con UUID y quiero conectar el UUID a los artículos respectivos, he descubierto que hay que ser una manera de separar el UUID del resto del objeto y mi problema radica en cómo conectar el id en el idArray al botón. TL;DR cuando haga clic en el botón  +  necesita aumentar la cantidad del stock por + 1, y los elementos deben estar conectados a su propio id. De alguna manera, el UUID necesita actuar como argumento para la función  addToCart . Document Products Stock Looping through products object using product as key {{ product.name }} {{ product.quantity }} Jacket 0 {Total: 0} new Vue({ created() { //Displaying the pushed id as an array this.counter() }, computed: { total() { return Object.values(this.products).reduce( (accumulator, value) => accumulator + value.price * value.quantity, 0 ) } }, data: { idArray: [], products: {  dd3ce0a3-1d30-4e3e-bcec-7095590019d9 : { name: 'Jacket', price: 200, quantity: 0 },  faf68d1f-8f3e-4668-891c-56118cc330f4 : { name: 'Pants', price: 100, quantity: 0 },  dd2bb41e-7f0a-4cb8-884b-588f9457dd54 : { name: 'Shoes', price: 100, quantity: 0 } }, }, el: '#app', methods: { //This functions takes all the UUID key and push it to idArray[] above counter() { let n = Object.keys(this.products); // console.log(n.length); for (i = 0; i < n.length; i++) { console.log(n[i]) this.idArray.push(n[i]) } }, addToCart(productId) { this.products[productId].quantity++ }, } })

pixelprodigy50bb · Accepted Answer

Prueba: v-for= (product, key) in products  y utilizar el key en el addProducts llamada: add products(key)

Gpt · Answer

En tu código, estás pasando el objeto product completo al método addToCart en lugar de solo el UUID asociado a ese producto. Para solucionar esto, puedes pasar el UUID como argumento al método addToCart. Aquí tienes una manera de hacerlo: En tu template, cuando llamas a la función addToCart, pasa el UUID del producto en lugar del objeto completo: html Asegúrate de agregar el UUID a cada producto en tu objeto products: js products: {  dd3ce0a3-1d30-4e3e-bcec-7095590019d9 : { id:  dd3ce0a3-1d30-4e3e-bcec-7095590019d9 , name: 'Jacket', price: 200, quantity: 0 },  faf68d1f-8f3e-4668-891c-56118cc330f4 : { id:  faf68d1f-8f3e-4668-891c-56118cc330f4 , name: 'Pants', price: 100, quantity: 0 },  dd2bb41e-7f0a-4cb8-884b-588f9457dd54 : { id:  dd2bb41e-7f0a-4cb8-884b-588f9457dd54 , name: 'Shoes', price: 100, quantity: 0 } }, Actualiza el método addToCart para cambiar la cantidad del producto correspondiente utilizando el UUID: js addToCart(productId) { this.products[productId].quantity++ }, Con estos cambios, ahora addToCart debería recibir el UUID del producto como argumento y aumentar la cantidad del producto correspondiente en 1 cuando se haga clic en el botón  + .

Gemini · Answer

El error en el código proporcionado es que la función addToCart espera un ID de producto como argumento, pero la está pasando todo el objeto de producto. Para solucionarlo, puede modificar la llamada a addToCart para que pase el ID del producto: html Aquí está el código actualizado con el cambio: html Document Products Stock Looping through products object using product as key {{ product.name }} {{ product.quantity }} Jacket 0 {Total: 0} new Vue({ created() { //Displaying the pushed id as an array this.counter() }, computed: { total() { return Object.values(this.products).reduce( (accumulator, value) => accumulator + value.price * value.quantity, 0 ) } }, data: { idArray: [], products: {  dd3ce0a3-1d30-4e3e-bcec-7095590019d9 : { name: 'Jacket', price: 200, quantity: 0 },  faf68d1f-8f3e-4668-891c-56118cc330f4 : { name: 'Pants', price: 100, quantity: 0 },  dd2bb41e-7f0a-4cb8-884b-588f9457dd54 : { name: 'Shoes', price: 100, quantity: 0 } }, }, el: ' app', methods: { //This functions takes all the UUID key and push it to idArray[] above counter() { let n = Object.keys(this.products); // console.log(n.length); for (i = 0; i < n.length; i++) { console.log(n[i]) this.idArray.push(n[i]) } }, addToCart(productId) { this.products[productId].quantity++ }, } })

Referencia de objeto UUID clave para productos en VueJS

3 Respuestas: