Best way to update an object's value in array (state) in Vuex

Question

Currently, I made a simple cart in Vue with Vuex. The issue I'm having is that I'm updating the quantity of a product inside a cart object, but this does not update on the front-end view (it's not reactive).

What I've current done is updated an object value inside the cart array, for it to work I needed to set the existing cart to an empty array, then I re-applied the old cart with the new value to the cart state.

What would be the best way to update a value of an object inside an array?

Here are the following relevant data from my module (vuex):

    namespaced: true,
    state: {
        cart: [],
        products: [
            {
                id: 2,
                name: 'Product sweater 2',
            },
            {
                id: 1,
                name: 'Product sweater',
            }
        ]
    },
    mutations: {

        update(state, product) {

            const index = state.cart.findIndex(x => x.id === product.id)

            if (index !== -1) {
                state.cart[index].quantity++
                state.cart = [
                    ...state.cart
                ]
            } else {
                product.quantity = 1
                state.cart.push(product)
            }
        },
   }

Amaarockz · Accepted Answer · 2021-10-04 13:54:48Z

2

It would be better if you send the index of the object such that it will be easy to update the particular value without searching for the item in the array else you can follow the below approach

mutations: {
    update(state, product) {
        // Find index of the item to be updated
        const itemIndex = state.cart.findIndex(x => x.id === product.id)
        state.cart[itemIndex] = product;
    }
}

answered Oct 4, 2021 at 13:54

Amaarockz

4,6942 gold badges12 silver badges31 bronze badges

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

2 Comments

n212 Over a year ago

Thank you for your answer. I've done it your way, with index, and it works, but it's unfortunately not reactive

Amaarockz Over a year ago

Are you use mapState in your vue component?

tony19 · Accepted Answer · 2022-07-16 04:56:48Z

2

You can use Vue.set and Vue.delete to change array and object in vue.js. Vue.set is a tool that allows us to add and change a property to an already reactive object.

Vue.set - API

Reactivity in Depth

edited Jul 16, 2022 at 4:56

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Oct 4, 2021 at 13:44

ali jahanpak

311 silver badge2 bronze badges

Comments

Luciano · Accepted Answer · 2021-10-04 13:55:48Z

0

You can try something like this. Code is self-explanatory

mutations: {
    update(state, product) {
        // Find product index in cart
        const index = state.cart.findIndex(x => x.id === product.id)
        if (index !== -1) {
            // If product is found, update properties
            let productFound = state.resources[index]
            productFound.quantity++
            // Update the product in state
            state.cart = [...state.cart.slice(0, index), { ...productFound, ...product }, ...state.cart.slice(index + 1)]
        } else {
            // Add product to state
            product.quantity = 1
            state.cart.push({ ...product })
        }
    }
}

edited Oct 4, 2021 at 13:55

answered Oct 4, 2021 at 13:50

Luciano

2,2042 gold badges19 silver badges31 bronze badges

1 Comment

n212 Over a year ago

Thank you for your answer. After trying your solution, it unfortunately did not work. it seems to not update the quantity and is not reactive

Collectives™ on Stack Overflow

Best way to update an object's value in array (state) in Vuex

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related