Question

我正在尝试更新名为“ cartItems”的Vuex数组中的quantity属性，但是不会使用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>

进口道具：
道具：['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。

Vue.js和Vuex不渲染更新的数组

2 个答案: