Vue.js: condition for class switching

Question

I already have an active-class for the item in a sidebar but how do I change the class of its label when the item is active? I need the span with the class="u-label g-font-size-11 g-bg-primary g-rounded-20 g-px-7 g-ml-3" to have the class="u-label g-font-size-11 g-bg-primary g-rounded-20 g-px-7 g-ml-3 g-color-primary g-bg-white" when I click on Notifications (make the item active).

<router-link to='/notifications'
                 class="list-group-item justify-content-between g-brd-none list-group-item-action"
                 active-class="active">
      <i class="icon-bell g-pos-rel g-top-1 g-mr-8"></i>
      Оповещения
      <span v-if="getNotificationsUnviewed > 0"
            class="u-label g-font-size-11 g-bg-primary g-rounded-20 g-px-7 g-ml-3">
             {{ getNotificationsUnviewed }}
      </span>
    </router-link>

can you make any live demo with minimal and clear requirement ? — freelancer
– freelancer, Commented Feb 2, 2018 at 12:20

tony19 · Accepted Answer · 2022-07-15 23:04:28Z

2

You'll need to use v-bind to the class passing an object with true/false values, like follows:

<span v-if="getNotificationsUnviewed > 0"
    v-bind:class="{'u-label g-font-size-11 g-bg-primary g-rounded-20 g-px-7 g-ml-3' : true, 'g-color-primary g-bg-white' : isActive}">
         {{ getNotificationsUnviewed }}
  </span>

Let's have a look at what's inside the :class:

{
  "u-label g-font-size-11 g-bg-primary g-rounded-20 g-px-7 g-ml-3": true,
  "g-color-primary g-bg-white": isActive
}

The first class set will always be there as the value is true, the second will be set only if isActive is true.

Of course, your instance/component must have the isActive prop/data in order for this to work.

See the docs for more info and alternative ways to doing so.

edited Jul 15, 2022 at 23:04

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Feb 2, 2018 at 12:24

Phiter

15k14 gold badges52 silver badges87 bronze badges

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

2 Comments

Roy J Over a year ago

You can also have an unbound class="u-label..." for the unchanging values and only include the changeable ones in the :class=

Phiter Over a year ago

Thank you for the information @RoyJ, I've always wondered if I could do that but I have never had time to test it out.

Collectives™ on Stack Overflow

Vue.js: condition for class switching

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related