Question

我正在制作产品页面和购物车页面，当我单击Addtocart按钮时，我希望将产品添加到购物车页面。现在，我没有数据库也很忙，所以我只想创建一个购物车数组，每当我单击按钮时，该数组就会附加该产品

//this is product page
<template>
  <div class="container">
    //here i am listing the products
    <div v-for="product in products" :key="product.id">
      <div>
        <h1>{{ product.name }}</h1>
        //when i click this button i want to add the product the cart array, now to go to methods
        <button @click="Add" class="button" >Add to cart</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Product',
  data () {
    return {
      products: [
        {name: 'product1', description: 'preview text', id: '1'},
        {name: 'prduct2', description: 'preview text 2', id: '2'}
      ],
      cart: []
  },
  methods: {
    //when i click the button here i have no idea how to add the product the cart
    Add () {
      this.$set(this.cart, 'name', 'product1')
    }
  }
}
</script>

Answer 1

您可以期望Add函数中的参数是产品的ID。现在，您可以在函数中获取此ID，然后获取与此ID相对应的乘积并将其添加到cart数组中。

Answer 2

// Data
const data = {
  products: [
    {name: 'product1', description: 'preview text', id: '1'},
    {name: 'prduct2', description: 'preview text 2', id: '2'}
  ],
  cart: []
};

// Adding product '1' to cart
const id = '1'
data.cart.push( ...data.products.filter( item => item.id === id ) );

// Result
console.log( data );

Answer 3

要向购物车中添加商品，您必须将每个产品都具有唯一性的商品（例如商品ID）传递给“添加”功能。然后，使用该信息，您可以在购物车列表中附加相应的产品。抱歉，我无法提供代码帮助，因为我无法使用vue.js，但我敢肯定上述方法会有所帮助。让我知道是否有问题

Vue.js如何从另一个数组向数组添加项目？

3 个答案: