Vuejs how to add an item to an array from another array?

Question

i am making a product page and cart page, when i click on the Addtocart buton i want the product to be added to the cart page. Now i am wokring without a database so i just want to create an array of cart and when ever i click on the button the array is appended with that product

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

void · Accepted Answer · 2018-08-13 12:28:29Z

1

You can expect a param in the Add function which is the id of the product. Now you can get this id in the function and then fetch the product corresponding to this id and add it to the cart array.

answered Aug 13, 2018 at 12:28

void

36.7k10 gold badges71 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

void Over a year ago

You can simply add {{cart}} anywhere in your template to see its value for testing purpost. It will change as it is reactive.

klawdyo · Accepted Answer · 2018-08-13 12:31:30Z

0

// 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 );

answered Aug 13, 2018 at 12:31

klawdyo

193 bronze badges

2 Comments

ilyes hamrouni Over a year ago

Thank you! it works now, i have a litte question. i passed the cart component that lists the cart array inside the product.vue component, <cart :cart="cart"/> however i want to use this on separate page and not inside the product component page, how can i establish this ?

klawdyo Over a year ago

You have use Vuex. See this 10 minutes video: youtube.com/watch?v=LW9yIR4GoVU

Chaitanya Maurya · Accepted Answer · 2018-08-13 12:36:33Z

0

In order to add something to the cart, you'll have to pass something that's unique for each and every product, like product id, to the Add function. And then using that information, you can append the cart list with your corresponding product. Sorry, I can't help you with the code 'cause i don't work with vue.js, but I am pretty sure the above method would help. let me know if there is a problem

answered Aug 13, 2018 at 12:36

Chaitanya Maurya

8311 bronze badges

Collectives™ on Stack Overflow

Vuejs how to add an item to an array from another array?

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related