CODEWITHSUNDEEP
vue.js
sinak
sinak

Reputation: 242

conditional class binding in list using props in vue js

progressbar component receives props from parent component name activeStep that its value is active index of progressbar. my challenge is while rendering list of progressbar i want to set active class to li s that less than value of active step property or equal to value how can i do that?

<template>
  <div>
    <ul class="progressbar">
      <li v-for="(progressbarCase,index) in progressbarCases" :key="progressbarCase.id">
        {{progressbarCase.title}}
      </li>
    </ul>
  </div>
</template>
<style lang="css">
  @import "../assets/stylesheet/progressbar.css";
</style>
<script>
export default {
  props: ['activeStep'],
  data () {
    return {
      progressbarCases: [
        {title: 'first'},
        {title: 'second'},
        {title: 'third'}
      ]
    }
  }
}
</script>

Upvotes: 0

Views: 3600

Answers (2)

Thomas Brd
Thomas Brd

Reputation: 1273

Quite simple, if you have more than one conditionnal class, you need to define the :class attribute as an object like this:

<li :class="{
    'a-conditional-class': true,
    'an-other-conditional-class-but-not-displayed': false,
}">
</li>

For your information, you can also couple conditional and unconditional classes ! And in one :class attribute, like this:

<li :class="[
    'an-unconditional-class',
    {
        'a-conditional-class': true,
        'an-other-conditional-class-but-not-displayed': false,
    }
]">
</li>

Have a look on the official documentation for more information about Class an style binding: https://v2.vuejs.org/v2/guide/class-and-style.html#ad

Upvotes: 0

Michael
Michael

Reputation: 168

If you want add class conditional, you can use :class="". For example: :class="true ? 'active' : 'disable'". with this,if condition is true: class="active" else class="disable"

Upvotes: 1

Related Questions