javascript - 如何修复或抑制误报 "You may have an infinite update loop in a component render function"Vue 警告

Question

我有以下 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 警告:

You may have an infinite update loop in a component render function.

通过代码可以看到，虽然循环中有赋值，但是这个赋值并没有什么会导致无限更新的地方。

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

我怎样才能抑制这个错误，或者让 Vue 满意没有可能的无限更新循环？

更新:

这段代码为我完成的是，因为购物车项目是按类别名称分组的，所以只有具有该类别名称的第一个项目显示类别名称。因此，不是椅子类别的每个产品都在其上方显示“椅子”，而是只有第一个。这如我所料。

Answer 1

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

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