我想将数据从产品数组发送到购物车数组，它显示未定义的值

Question

我想将数据从产品数组发送到购物车数组，它显示值未定义

这是我的 vue 脚本，我想将所选产品的价格和价格添加到购物车

这张卡片也是一个数组，我想把这两个值压入对象

<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>

我无法获取产品项目中的数据以将其推入数组

Answer 1

this.products 是数组，所以 this.products.proid/price 是未定义的。

也许你想这样做（forEach 也可以）

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>
```

我想将数据从产品数组发送到购物车数组，它显示未定义的值

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

vuejs3

shopping-cart