如何修复或抑制误报“您可能在组件呈现函数中有无限更新循环”Vue警告
如何修复或抑制误报“您可能在组件呈现函数中有无限更新循环”Vue警告
提问于 2018-07-24 04:45:41
我有以下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警告：
你可能在一个组件渲染函数中有一个无限的更新循环。
正如您从代码中看到的，尽管循环中有赋值，但此赋值不会导致无限更新。
我也尝试过用{{currentCatName}}替换{{cartItem.searchCat2}}，但仍然收到错误消息。
我怎样才能抑制这个错误，或者让Vue确信不可能有无限的更新循环？
更新：
这段代码为我完成的是，因为购物车项目是按类别名称分组的，所以只有具有该类别名称的第一个项目才显示类别名称。因此，不是每个椅子类别的产品都在上面显示“椅子”，而是只有第一个产品显示在上面。这就像我期望的那样工作。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-24 05:03:10
您可以通过索引直接引用模板中的上一项：
<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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51486987
复制相关文章
相似问题