How to use two conditional statements in VueJS

Question

I'm creating a sidebar with a lot of functionality so I need to add two conditions to my :class but I don't know how to do it. This is what I did:

:class=" showSidebar ? 'open' : 'closed', showSidebarMini ? 'openmini' : 'closedmini'"

Answer 1

You can use object styles to do the following:

Example:

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

In your case:

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

Answer 2

You can use class array:

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