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警告：

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

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

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

我该如何抑制此错误，或者使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>

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

1 个答案: