时间戳

首页 > 解决方案 > 为什么我的计数器应用惰性效果 vuejs

javascript - 为什么我的计数器应用惰性效果 vuejs

问题描述

所以我有一个这样的柜台

<button class="btn btn-light" @click="incrementQuantity(order)">+</button>
    <td class="tg-lqy6">{{ order.quantity }}</td>
<button class="btn btn-light" @click="decrementQuantity(order)">-</button>

并且这两个按钮应该增加和减少这个数量值这些是我的方法：

 incrementQuantity(order){
        order.quantity += 1;
     
    },
    decrementQuantity(order){
        order.quantity -= 1;
    }

起初我以为它不起作用，但是当我通过路由器链接或某事转到任何其他组件并返回时，该操作被触发，只要我没有重新加载页面，它就会根据点击次数增加或减少“在本地主机上运行”控制台中没有错误

请注意：订单来自 v-for ="order in orders" 并且我添加了一个键和订单数组是来自 App.vue 父组件的道具

标签： javascriptvue.jsvuejs2vue-component

解决方案

如果我误解了你的问题，请纠正我，我认为你的问题是一个已知的深度反应警告；当您更新嵌套值时会发生这种情况，而 Vue 无法知道它。

修复它的一种方法是使用Vue.set / this.$set如下：

incrementQuantity(order){
  this.$set(order, "quantity", order.quantity += 1);
},
decrementQuantity(order){
  this.$set(order, "quantity", order.quantity -= 1);
}

顺便说一句，Vue 3 声称修复了这个警告——你可以在这里了解更多

推荐阅读