[vue]: how to add dynamic class using css modules along with normal class css on the same element in Vue?

Question

For example when i use the scope i write the template with the scope rules, and the code will be

<div
  class="item ripple"
  v-show="tabList.length > 0"
  :class="{'item-on':currentTabActive==index}"
  v-for="(item,index) in tabList"
  :key="index"
  @click="checkTab(index)"
  >
</div>

but when i use the css modules, i try the code style like

<div :class="[{'$style.red': true},'$style.bold']">hhhhhh</div>

or that

<div :class="{'$style.red': true},'$style.bold'">hhhhhh</div>

or like that

<div :class="{'$style.red': true, '$style.bold'}">hhhhhh</div>

I wonder what's the right way to do?

How's it been going with your problem? Did you solve your problem? — Loi Nguyen Huynh
– Loi Nguyen Huynh, Commented Dec 20, 2019 at 6:50

Loi Nguyen Huynh · Accepted Answer · 2019-12-20 03:38:13Z

3

Is this what you want? Don't put $style.red inside string '$style.red', instead if you want to interpolate it, use [$style.red]. $style.red works jut like normal javascript variable.

<div 
  v-show="tabList.length > 0" 
  :class="[
    'item', 
    'ripple', 
    {[$style.red]: isRed}, 
    $style.bold, 
    {'item-on': currentTabActive==index}
  ]"
  v-for="(item,index) in tabList" 
  :key="index"
  @click="checkTab(index)">
</div>

edited Dec 20, 2019 at 3:38

answered Dec 20, 2019 at 3:30

Loi Nguyen Huynh

10.2k5 gold badges33 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

[vue]: how to add dynamic class using css modules along with normal class css on the same element in Vue?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related