@click handler not working under certain circumstances that I don't understand

Hello everybody. I have the following template code

        <h1>Shopping List</h1>
        <ul class="list-group">
                v-for="item in items"
                class="list-group-item d-flex justify-content-between"
                :class="item.active ? '' : 'disabled'"
                <span :class="item.active ? '' : 'line-through'">{{ item.name }} – {{ item.updated_at }}</span>
                <i class="material-icons" @click="toggleActive(item)">check_box{{ item.active ? '_outline_blank' : '' }}</i>

these are the methods:

methods: {
            sortItems() {
                this.items.sort(function (a, b) {
                    if (a.active && !b.active) return -1;
                    if (!a.active && b.active) return 1;

                    if (moment(a.updated_at).isAfter(b.updated_at)) return -1;
                    if (moment(a.updated_at).isBefore(b.updated_at)) return 1;
            toggleActive(item) {
                item.active = !item.active;

If the item is active (i.e. not bought / not added to shopping cart), I can click on the icon and everything works as expected. The item gets active = false, the icon changes and the item gets sorted to the bottom of the list. If I click on an item which is not active – nothing happens. The handler isn’t even called, I don’t get the “toggling” console log.

What am I missing?

thanks newsbhumi

Alright, I feel stupid now. It was because of bootstrap’s disabled class. That also disables click events.