Менять стили по клику v-bind?

Как реализовать функционал - кликаем на кнопки - она меняют свой фон, когда делаем toggle click на кнопку - меняем направленям картинки в кнопке (Если кликаем на кнопку другую - прежняя стает в начальные стили)

Мой темплейт

<div class="btn-filter mr-2"
                 v-for="item  in lista" :key="item.id"
                 :class="{btnfilteractive: item == activeIndex, green: item === 0}"
                 @click="changeSelect(item)">
                {{ item.texto }}
                <img src="@/assets/images/icons/arr-down-black-i.svg"
                     :class="{rotateimg: item == activeIndex, green: item === 0}">
            </div>

ДАТА

 lista: [
                {"id": "1", "texto": " Час відправлення"},
                {"id": "2", "texto": "Ціна"},
                {"id": "3", "texto": "Комфорт"},
                {"id": "4", "texto": "Час прибуття"},
                {"id": "5", "texto": "Час в дорозі"},
                {"id": "6", "texto": "Рейтинг"},
                {"id": "7", "texto": "За формуванням"}
            ],
            active_el: 1,

Методы

activate(el) {
            this.active_el = el;
        }

Стили

.btn-filter {
    background: transparent;
    border: 1px solid #c9cecf;
}

.btnfilteractive {
    border: 1px solid #ffffff;
    background: #FFFFFF;
    transition: .3s ease;
}

.rotateimg {
    transform: rotate(180deg);
}

Ответы (0 шт):