[Vuejs]-Vue v-bind:class when outside of a loop

by

0👍

✅

You need to do a couple things, I’d suggest using a computed to create this value, and you need to wrap your value in a span or some other tag to apply the class “isActive”. Currently you are adding this class to an input – which will not give you the bold styling you have on the others.

computed: {
    isArchiveActive () {
      return this.selectedItem === 'All'
    }
}
<label>
      <input type="radio" v-model="selectedItem" value="All" />
      <span v-bind:class="{'isActive': isArchiveActive}">Archive ({{ items.length }})</span
    </label>

Here is the forked codepen:
https://codepen.io/anon/pen/Ervdrr?editors=1010

👤jonnycraze

Leave a comment