Vue : Conditional render of class

Question

I'am using vue-bootstrap , in the following code class come when step===1 but in else condition (!step===1) i want to render another class. First one is working fine , the else condition is not working. Steps is associated with Wizards. Can anybody help me out ?

 <div :class="{'d-flex flex-column justify-content-center align-items-center': step === 1, ' d-flex justify-content-center align-items-center': !step === 1  }"></div>

What is the data type of `step` here number or boolean? and also what is the actually values for step can be for both condition? — palaѕн, May 08 '20 at 10:26
steps are related to wizard ( v-stepper ), they are numbers , there are 4 steps. I want to render different class step 1 and another set for step 2 3 and 4. — theFrontEndDev, May 08 '20 at 10:29

score 1 · Accepted Answer · answered May 08 '20 at 10:30

For the if condition you are correctly using step===1, but for the else condition you need to use

step !== 1

which means that if step is not equal to 1 then add these classes. So, the template will be like:

<div :class="{
   'd-flex flex-column justify-content-center align-items-center': step === 1, 
   'd-flex justify-content-center align-items-center': step !== 1
 }">
</div>

But as it seems that for step===1 you are just adding flex-column and other classes d-flex justify-content-center align-items-center are common in both the conditions, so you can also try this:

<div 
  class="d-flex justify-content-center align-items-center"
  :class="{'flex-column': step === 1}">
</div>

score 0 · Answer 2 · answered May 08 '20 at 10:32

What I understand is that you need something like, if step is equal to 1 then align items in column else in row. You can bind class as shown below.

<div 
   :class="step === 1 ? 
        'd-flex flex-column justify-content-center align-items-center': 
        'd-flex justify-content-center align-items-center'">
  ...
  ...
</div>

Vue : Conditional render of class

2 Answers2