<div class="container" :class="{ qwerty: !open }" :class="lower? 'left' : 'right'">
Hi, why vue doesn't allow me to add several classes with conditions, like in example.
It allows to add one only.
How to implement this?
Add a comment
|
3 Answers
Use Array Syntax.
:class="[lower ? 'left' : 'right', upper ? 'up' : 'down']"
Comments
There are multiple ways to do this, but I think for you it should be enough to do this:
:class="[{qwerty: !open}, lower ? 'left' : 'right']"
it's a mix from passing an array of classes and passing objects
Comments
If you have multiple conditions that goes too lengthy including too many logics then go with computed
<div class="container" :class="getClass">
then
computed: {
getClass() {
var className = 'container';
if(!this.open) className = className+' '+'querty';
if(this.lower) className = className+' '+'left';
else className = className+' '+'right';
return className;
}
}
Comments
