Having issues with CSS Modules `$style` object in Vue Template

Question

I am using CSS Modules in my Vue application where a section of the template requires dynamic classes but having issues rendering the class in the $style object.

I have an internal data that toggles a boolean value.

data() {
  return {
    upper: false,
    lower: false,
  };
},

In the template below, I have this

<div
  :class="[$style['class 1'], activeClass]">
</div>

Active class is computed as follows:

activeClass() {
  return this.$style['active-class'] = this.upper;
}

There are methods that handles upper and lower based on the internal logic. Though these internal data values do return expected values but I can't seem to add the activeClass dynamically in the template.

are you using npm / webpack to build assets and are you using any transpiler(babel) with caching enabled? — Chris Medina
Yep, I am @ChrisMedina. I am only running into an issue where I am managing in an internal data as opposed to component API, aka, prop. — Mihir Patel
Are you following the module rules at: vue-loader.vuejs.org/guide/css-modules.html#usage ? Try disabling babel/transpiler cache and npm run build your application . Also make sure you have : <style module> </style> — Chris Medina
Yep, following those rules as well. Rest of the templates are working just fine. For example: base-class-[some-key but when I need to add a modifier class active-class based on internal data, it does not render the modifier class. It has to do with how Vue's reactivity. — Mihir Patel

Chris Medina Chris Medina · Accepted Answer · 2020-05-18T17:53:20

<script>
export default {
  activeClass() {
    console.log($style['active-class']);
    return this.$style['active-class'] = this.upper;
    // -> "red_1VyoJ-uZ"
    // an identifier generated based on filename and className.
  }
}
</script>

Having issues with CSS Modules `$style` object in Vue Template

1 Answers