javascript - Vuejs 和 Vuex 不呈现更新的数组

Question

我正在尝试更新名为“cartItems”的 Vuex 数组中的数量属性，但它不会使用 v-for 循环更新它。

ShoppingCart.vue(父级)

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

进口 Prop :
Prop :['项目'，'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 和 Vuex 不会将对象的那个键识别为响应式的，所以即使你是更新它不会重新呈现 DOM 的值。

我是如何解决它的，只需将 Quantity 属性添加到我的数据库表并将其默认设置为 1。