Update Object Item in Vuex Array

Question

I am trying to manage a simple shopping cart of products. The products are stored on the state as an array called items

export const state = () => ({
  cart: {
    items: [],
  }
})

If a product is already been added to the cart, and someone tries to add it again, I'm trying to update the quantity field

addItem(state, product) {
  let cartProduct = state.cart.items.find((item, index) => {
    return item.id === product.id
  })
  cartProduct.quantity++;
});

This isn't working for me as it's not updating the state. Does anyone know the trick?

ittus · Accepted Answer · 2018-11-07 13:22:52Z

2

It's reactivity issue. You can make deep copy of cart to make store reactive:

   addItem(state, product) {
      let cartProduct = state.cart.items.find((item, index) => {
        return item.id === product.id
      })
      cartProduct.quantity++;
      state.cart = JSON.parse(JSON.stringify(state.cart))
    });

Another option is using Vue.set

answered Nov 7, 2018 at 13:22

ittus

22.5k5 gold badges62 silver badges59 bronze badges

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

2 Comments

Bennett Dams Over a year ago

Is there any benefit in using .find(..) to change the value of the object instead of using state.cart.map(..) (with if(item.id == product.id) ...) to change the cart directly?

ittus Over a year ago

state.cart.map might be better. Then you don't need to do JSON.parse(JSON.stringify())

Collectives™ on Stack Overflow

Update Object Item in Vuex Array

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related