I've encountered an issue with an app I'm currently working on. In my project, I am utilizing Vue.js to create the front-end and attempting to apply two classes to a div within a v-for loop.
The first class is bound with a filter that functions correctly when used independently:
v-bind:class="item.category | formatCategory"
When retrieving data from my API, the category comes in with uppercase letters and spaces. I need to clean it up by removing spaces and converting everything to lowercase. This is where my formatCategory filter comes into play:
formatCategory: function (value) {
if (!value) return ''
value = value.toString()
value = value.replace(/\s/g, '') //remove spaces
return value.toLowerCase(); //everything in lowecase
}
}
In addition to this, I require the class binding to display a certain class when an object is marked as completed:
v-bind:class="{completed: item.completed}"
Both of these bindings work individually, but when I try to combine them into one super component, it seems to fail:
v-bind:class="[{completed: item.completed}, item.category | formatCategory]"
Despite my efforts, I haven't been able to figure out what's going wrong after spending hours searching through Google for a solution!
<div
class="column-object"
v-bind:class="[{completed: item.completed}, item.category | formatCategory]"
v-for="(item, i) in itemRows"
v-bind:key="i"
>