[Vuejs]-How to add class on different if statement in vue

by

0👍

you can try :

<div class="element" v-for="error in errors" :key="error" :class="step==1 ? 'class1' : 
  step==2 ? 'class2':'class3'">
  ....
 </div>

0👍

I would suggest an approach like this:

<div v-for="error in errors" :key="error" :class="`class_${step}`" >
  <span @click="modify()"> {{error}}</span>
</div>

Or if you don’t want to name your classes that way:

<div v-for="error in errors" :key="error" :class="getClass" >
  <span @click="modify()"> {{error}}</span>
</div>
...
methods: {
  getClass() {
    if (this.step === 1) return 'classA';
    if (this.step === 2) return 'classB';
    // etc.
  }
}

Leave a comment