Vue 3 - Binding multiple classes to one condition

Question

From the docs, it shows that we can bind classes to conditions like so:

<div
  class="static"
  :class="{ active: isActive, 'text-danger': hasError }"
></div>

What if I want to bind two classes to the same condition, would this work? Would there be a shorter way?

<div
  class="static"
  :class="{ active: isActive,  active: isSelectable }"
></div>

:class="{ active: isActive || isSelectable }" you can also separate that out into a helper method if the complexity grows too much. — TheHiggsBroson
– TheHiggsBroson, Commented Feb 28, 2022 at 20:48

Husam Elbashir · Accepted Answer · 2020-12-16 02:12:10Z

8

If I understand you correctly you want to bind multiple classes to the same condition. There's nothing preventing you from doing it like this if you wanted to ..

<div
  class="static"
  :class="{ 'class-1 class-2': condition }"
></div>

answered Dec 16, 2020 at 2:12

Husam Elbashir

7,1953 gold badges20 silver badges32 bronze badges

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

2 Comments

Mohammad Ayoub Khan Over a year ago

What if I want to concat class name with variable name? Like this :class="{ fa-${item.icon}: 2 == 2 }"

Ciabaros Over a year ago

@MohammadAyoubKhan then you can use the dynamic property syntax like so - :class="{ [`fa-${item.icon}`] : 2 == 2 }" Ternaries are also good here inside the [ ] declaration.

catmal · Accepted Answer · 2020-12-16 02:33:28Z

2

You can use || and && to combine conditions:

   <div
      class="static"
      :class="{ active: isActive || isSelectable }"
    ></div>

answered Dec 16, 2020 at 2:33

catmal

1,7581 gold badge19 silver badges36 bronze badges

Collectives™ on Stack Overflow

Vue 3 - Binding multiple classes to one condition

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related