Search code examples
javascriptvue.jsreact-fullstack

Vue have 2 class conditions

I am trying to learn vue and all about classes and having them be dynamic. I have an issue that I can't seem to find the solution for. I have a div and in it I want to have a class that depends on a variable such like this

<div :class="{'active':isActive}"

but for the same div I also wan to have another class name that is in the data for the vue component. Such like this

<div :class="divTheme"

So basically together it would look something like this

<div :class="{'active':isActive} :class="divTheme"

but I understand that you cannot have two classes that are like this. Any suggestions?

Solution

  • Class binding supports array syntax, and you can further use object syntax inside array syntax as follows in your case:

    <div :class="[{'active': isActive}, divTheme]"