How to put two conditionals in :class VueJS

user_17843039 0
Viewed 59

I'm creating a sidebar with a lot of features soo I need add two conditionals in my :class, but i don't know how to do this. That's what I do:

:class=" showSidebar ? 'open' : 'closed', showSidebarMini ? 'openmini' : 'closedmini'"
vuejs3 vue-component vue.js
3 Answers

You can do in object style:

Example:

{
  'open': showSidebar,
  'closed': !showSidebar,
  'openmini': showSidebarMini,
  'closedmini': !showSidebarMini
}

In your case:

:class="{ 'open': showSidebar, 'closed': !showSidebar, 'openmini': showSidebarMini, 'closedmini': !showSidebarMini }"
user_115552970

you must use object syntax when you have a condition in class

v-bind:class="{'open' : showSidebar , 'openmini' : showSidebarMini}"

and use array in your class when you need toggle class

v-bind:class="[showSidebar ? 'open' : 'closed', showSidebarMini ? 'openmini' : 'closedmini']"
user_180792200

you can use array of classes:

:class="[(showSidebar ? 'open' : 'closed'), (showSidebarMini ? 'openmini' : 'closedmini')]"
user_119891890
Related