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

Hello everybody. I have the following template code

<template>
    <div>
        <h1>Shopping List</h1>
        <ul class="list-group">
            <li
                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>
            </li>
        </ul>
    </div>
</template>

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) {
                console.log("toggling...");
                item.active = !item.active;
                this.sortItems();
            }
        }

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.