CODEWITHSUNDEEP
vue.js
Rob
Rob

Reputation: 1636

Vue.js Toggle Class fails

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;
        }
    }
})

Upvotes: 1

Views: 109

Answers (1)

Rob
Rob

Reputation: 1636

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>

Upvotes: 1

Related Questions