Here is the Vue template I am currently working with:
<div v-for="cartItem in cartItems">
<p class="is-size-5 has-text-weight-bold" v-if="showCategoryName(cartItem.searchCat2)">
{{cartItem.searchCat2}}
</p>
</div>
This template is utilizing the following Vue method:
showCategoryName(catName) {
if (this.currentCatName === catName) {
return false;
}
this.currentCatName = catName;
return true;
},
However, when running this code, a Vue Warning appears in the console:
You may have an infinite update loop in a component render function.
Despite the warning message, the assignment within the loop should not lead to an infinite update loop.
I also attempted replacing {{cartItem.searchCat2}} with {{currentCatName}}, but the error persisted.
Is there a way to suppress this error or convince Vue that an infinite update loop is not possible here?
Update:
This piece of code helps me display category names for grouped cart items. It ensures that only the first item in each category displays the name. For example, instead of every chair product showing "Chair" above it, only the first one does. This functionality works as intended.