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

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

正如代码所示，虽然循环中有赋值，但这个赋值不会导致无限更新

我还尝试用

{{currentCatName}

替换

{{cartItem.searchCat2}}

，但仍然收到错误

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

{{cartItem.searchCat2}

更改模板内部的状态有点奇怪。

showCategoryName

通过设置

currentCatName

做什么？（模板呈现应该是幂等的…）该赋值的目的是什么？第一次选中时，返回

true

，然后将其更改为

false

？最后你什么也不显示？试着将

v-if

的逻辑提升到

map（）

ed版本的

cartItems

。这样，您就可以在

v-for

中尽可能少地执行逻辑。@Ry-基本上，购物车项目是按类别名称分组的，只有具有该类别名称的第一个项目才应显示类别名称。不是每个chair产品上面都有“chair”，而是只有第一个产品有。创建一个计算属性，将源数组拆分为类别分组子数组（如下所示）不是更容易吗？

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