Менять стили по клику 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);
}