javascript - 如何解决或抑制误报“组件渲染函数中可能存在无限更新循环” Vue警告

我有以下Vue模板：

<div v-for="cartItem in cartItems">
    <p class="is-size-5 has-text-weight-bold" v-if="showCategoryName(cartItem.searchCat2)">
        {{cartItem.searchCat2}}
    </p>
</div>

正在调用以下Vue方法

showCategoryName(catName) {
  if (this.currentCatName === catName) {
    return false;
  }
  this.currentCatName = catName;
  return true;
},

这会在控制台中导致以下Vue警告：


  组件渲染函数中可能有无限的更新循环。


从代码中可以看到，尽管循环中有分配，但该分配没有任何内容会导致无限更新。

我也尝试用{{cartItem.searchCat2}}替换{{currentCatName}}，但仍然收到错误。

我该如何抑制此错误，或者使Vue满意没有无限可能的更新循环？

更新：

这段代码为我完成的功能是，由于购物车商品是按类别名称分组的，因此只有具有该类别名称的第一个商品才会显示类别名称。因此，不是每个椅子类别的产品都在其上方显示“椅子”，而是仅第一个。这按我预期的那样工作。

最佳答案

您可以通过索引直接在模板中引用上一项：

<div v-for="(cartItem, index) in cartItems">
    <p class="is-size-5 has-text-weight-bold"
       v-if="index === 0
             || cartItem.searchCat2 !== cartItems[index - 1].searchCat2">
        {{cartItem.searchCat2}}
    </p>
</div>