Vue.js Toggle Class fails

Question

I have a list of items - each item has an isDefault property. The initial value of item.isDefault is false.

I have a button with a method which toggles 'isDefault' - which should change a css class on the item (A font awesome class. Font awesome css is loaded, and the class works when used on the page as static html).

<div v-for="(item, index) in items">
  <button class="button" @click="toggleDefault(index)">
    <span class="icon is-small">
        <i class="fas" :class="item.isDefault ? 'fa-check' : 'fa-minus' "></i>
    </span>
    <span>is item default? {{item.isDefault}}</span>
  </button>
</div>

My toggleDefault method works - I pass the item index in, and do:

toggleDefault(i) {
    this.items[i].isDefault = !this.items[i].isDefault;
}

Indeed, I can see the value change from true to false in dev tools, and the html, and I can log the change to the console...

But the css class doesn't change. Looking through the inspector, it remains 'fa-minus'. I use the same pattern elsewhere and it works? Am I doing something dumb?

** Edit ** Added my JS - isDefault is defined on each item... toggleDefault toggles the value - but the class still doesn't change...

const app = new Vue({
    el: '#app',
    data: {
        items: [
            {
                name: 'foo',
                isDefault: false,
            },
            {
                name: 'bar',
                isDefault: false,
            }
        ],
    },
    methods: {
        toggleDefault(i) {
            this.items[i].isDefault = !this.items[i].isDefault;
        }
    }
})

check to see if there are any unrelated error preventing you from updating the class because I copied your code and it worked, could see the change in classes in the inspector html — Sdpotts93
– Sdpotts93, Commented Jul 22, 2019 at 21:47
Where and how is items defined? The only way this can happen is if your item objects don't actually have an isDefault property in their initial data — Phil
– Phil, Commented Jul 23, 2019 at 0:31
Adding a class to the button - it changes! But the class on the icon does not.... — Rob
– Rob, Commented Jul 23, 2019 at 12:49

Rob · Accepted Answer · 2019-07-23 13:04:19Z

1

Found the problem.... I'm using font-awesome SVG.... Font awesome swaps the tags out! the tag isn't there for vue to run the method on it!

Solution - wrap the font awesome tag in a v-if condition... this feels a bit gross, but it works.

<button class="button" :class="item.isDefault ? 'is-primary' : 'is-white' " @click="toggleDefault(item)">
   <template  v-if="item.isDefault">
       <span class="icon is-small">
            <i class="fas fa-check"></i>
       </span>
   </template>
   <template  v-if="!item.isDefault">
       <span class="icon is-small">
             <i class="fas fa-minus"></i>
       </span>
   </template>
   <span>Set as Default</span>
</button>

answered Jul 23, 2019 at 13:04

Rob

1,6363 gold badges26 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Phil Over a year ago

Good answer. I'm sure this will come in handy for others in future. You should mark it as the accepted answer

Rob Over a year ago

Thanks - have just checked it

Collectives™ on Stack Overflow

Vue.js Toggle Class fails

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related