I want to send data from product array to cart array and it shows values undefined

Question

I want to send data from product array to cart array and it shows values undefined

that's my vue script i want to add to cart the selected product proid and price

this card is also an array and i want to push those two values into object

<script>
export default {
  name: "ClothesView",
  props: {
    carts: {
      type: Array,
      required: true,
    },
    idi: String,
    prico: Number,
  },
  data: function () {
    return {
      cartos: this.carts,
      products: [
        {
          id: 1,
          img: require("@/assets/clothes/clo.png"),
          proid: "Frttt14",
          price: 10,
        },
        {
          id: 2,
          img: require("@/assets/clothes/clo2.png"),
          proid: "vc4555rt141",
          price: 8,
        },
        {
          id: 3,
          img: require("@/assets/clothes/clo10.png"),
          proid: "sd5rt141",
          price: 120,
        },
        {
          id: 6,
          img: require("@/assets/clothes/clo12.png"),
          proid: "kojkrt141",
          price: 14,
        },
        {
          id: 7,
          img: require("@/assets/clothes/clo13.png"),
          proid: "nmkt141",
          price: 100,
        },
        {
          id: 8,
          img: require("@/assets/clothes/clo15.png"),
          proid: "nghgj778",
          price: 41,
        },
        {
          id: 9,
          img: require("@/assets/clothes/clo16.png"),
          proid: "87878kll",
          price: 56,
        },
      ],
    };
  },
  methods: {
    addtocart() {
      this.cartos.push({
        proid: this.products.proid,
        price:this.products.price
      });
      console.log(this.cartos);
    },
  },
};
</script>

i couldn't get the data inside product item to push it into the array

Answer 1

this.products is Array, so this.products.proid/price is undefined.

maybe you want to do this (forEach is OK too)

for(let i = 0; i < this.products.length; i++) {
  this.cartos.push({
    proid: this.products[i].proid,
    price: this.products[i].price
  })
}

// in your case,  if you want to add  the selected product to cart
// you should v-for your products first 

```
<template>
  <div v-for="item in products" :key="item.id" @click="addtocart(item)">
    {{ item.proid }} - {{ item.price }}
  </div>
</template>

<script>
methods: {
  addtocart(item) {
    this.cartos.push({
      proid: item.proid,
      price: item.price
    });
    console.log(this.cartos);
  }
}
</script>
```