Utilizing CSS Modules in my Vue application introduces a challenge when trying to render dynamic classes within a particular section of the template. The issue lies in rendering the class from the $style object.
Within my internal data, I have toggles for boolean values:
data() {
return {
upper: false,
lower: false,
};
},
In the template snippet below, I am attempting to implement this:
<div
:class="[$style['class 1'], activeClass]">
</div>
The 'activeClass' is computed as follows:
activeClass() {
return this.$style['active-class'] = this.upper;
}
There are methods that handle 'upper' and 'lower' based on certain logic. While these internal data values do produce the expected results, dynamically adding the 'activeClass' in the template seems to be an obstacle.