代码之家 › 专栏 › 技术社区 › Goose

如何修复或抑制误报“组件呈现函数中可能有无限更新循环”Vue警告

vue.js javascript

1

Goose · 技术社区 · 7 年前

我有以下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确信没有无限的更新循环?

更新:

这段代码为我完成的是,因为购物车项目是按类别名称分组的,所以只有第一个具有该类别名称的项目才会显示类别名称。因此,与上面显示“椅子”的椅子类别中的每种产品不同,只有第一种产品可以。这是我所期望的。

1 回复 | 直到 7 年前

1

2

Ry- Vincenzo Alcamo 7 年前

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

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