Vuej 및 Vuex가 업데이트된 어레이를 렌더링하지 않음

Vuej 및 Vuex가 업데이트된 어레이를 렌더링하지 않음

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

수입 소품:
소품: ['아이템', '루프'색인']

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

감사합니다!

네, 어떤 이유로든 객체가 있고 키를 추가하려고 할 때 Vue와 Vuex는 객체의 키를 반응적으로 인식하지 않기 때문에 값을 업데이트하더라도 DOM을 다시 렌더링하지 않습니다.

해결 방법에서는 데이터베이스 테이블에 Quantity 속성을 추가하고 기본값으로 1로 설정하기만 하면 됩니다.

를 사용하여 새 개체 속성을 설정할 수 있습니다.이 메서드를 사용하면 속성이 반응형 속성으로 생성됩니다.

사용방법:

반응형 개체에 속성을 추가하여 새 속성도 반응형인지 확인하므로 뷰 업데이트를 트리거합니다.Vue가 정상적인 속성 추가(예: this.myObject.newProperty = 'hi')를 감지할 수 없기 때문에 반응형 개체에 새 속성을 추가하려면 이 옵션을 사용해야 합니다.

언급URL : https://stackoverflow.com/questions/53803197/vuejs-and-vuex-not-rendering-updated-array