Vuejs and Vuex not rendering updated array

Question

I'm trying to update the quantity property in a Vuex array called "cartItems", however it doesn't update it with the v-for loop.

ShoppingCart.vue (Parent)

<div class="cart_row_container">
 <CartItem v-for="(item, index) in $store.getters.getCart"
  :item="item"
  :loopIndex="index"
  :key="item.id"
 />
</div>

CartItem.vue (child)

<div class="item_row">
 <h4 class="quantity_text">{{item.quantity}}</h4>
</div>

Imported props:
props: ['item', 'loopIndex']

Vuex:

state:{
    cartItems: []
},
mutations:{
 changeQuantity(state, data){ 
        let newQuantity = state.cartItems[data.index]
        newQuantity.quantity += data.value
        this._vm.$set(state.cartItems, data.index, newQuantity)
    }
},

getters:{
    getCartLenght: state => {
        return state.cartItems.length
    },
    getCart: state => {
        return state.cartItems
    }
}

Thanks!

Hello Alexander, and welcome to SO. Try moving the invocation of $store.getters.getCart to a computed function in the parent component. — andrewhl
– andrewhl, Commented Dec 16, 2018 at 14:46
Thanks @andrewhl! Yep tried that just now, no change, still not updating :( — Alexander Dahlberg
– Alexander Dahlberg, Commented Dec 16, 2018 at 14:49
@AlexanderDahlberg i tried out your example here and it works, you could add additional code and fork it and give me the link — Boussadjra Brahim
– Boussadjra Brahim, Commented Dec 16, 2018 at 15:26

Alexander Dahlberg · Accepted Answer · 2018-12-16 17:54:32Z

2

Okay, so for some reason when ever you have an object and want to add a key to it and the object has already been made Vue and Vuex won't recognize that key of the object as reactive, so even though you are updating the value it won't re-render the DOM.

How I solved it, simply added the Quantity attribute to my database table and set it by default to 1.

answered Dec 16, 2018 at 17:54

Alexander Dahlberg

797 bronze badges

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

Comments

tony19 · Accepted Answer · 2022-07-15 23:10:20Z

2

You could use Vue.set to set a new object property. This method ensures the property is created as a reactive property.

Usage:

Adds a property to a reactive object, ensuring the new property is also reactive, so triggers view updates. This must be used to add new properties to reactive objects, as Vue cannot detect normal property additions (e.g. this.myObject.newProperty = 'hi').

edited Jul 15, 2022 at 23:10

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Dec 16, 2018 at 18:15

Renaud Tarnec

83.4k10 gold badges99 silver badges130 bronze badges

1 Comment

try-catch-finally Over a year ago

Related: stackoverflow.com/questions/36671106/…

Collectives™ on Stack Overflow

Vuejs and Vuex not rendering updated array

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related