Vuejs и Vuex не рендерит обновленный массив

Question

Я пытаюсь обновить свойство количества в массиве Vuex под названием «cartItems», однако оно не обновляет его с помощью цикла v-for.

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 (дочерний)

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

Импортированные реквизиты:реквизиты: ['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
    }
}

Спасибо!

Answer 1

Вы можете использовать Vue.set для установки нового свойства объекта.Этот метод гарантирует, что свойство создается как реактивное свойство.

Использование :

Добавляет свойство в реактивный объект, гарантируя, что новое свойство также является реактивным, так что запускает просмотр обновлений.Это необходимо использовать для добавления новых свойств в реактивные объекты, поскольку Vue не может обнаружить нормальные добавления свойств (например, this.myObject.newProperty = 'hi').

Answer 2

Хорошо, поэтому по какой-то причине, когда у вас есть объект, и вы хотите добавить к нему ключ, и объект уже создан, Vue и Vuex не распознают этот ключ объекта как реактивный, поэтому даже если выОбновление значения не приведет к повторной визуализации DOM.

Как я это решил, просто добавил атрибут «Количество» в таблицу базы данных и по умолчанию установил значение 1.