Меню переключается по нажатию на кнопки NOT и ATCHETECTURE, а также по нажатию на тумблер, но почему-то тумблер не работает как нужно(при нажатии на него switchOn не меняется с true на false и соответственно меню не переключается). В чем может быть ошибка?
<template>
<div class="nav-menu">
<div
v-for="(title, index) in ['not', 'archetecture']"
:class="['accordion__title', {'active': index == activeIndex}]"
:key="`${title}_${title}`"
@click="getCategoriesTitle(title, index)">{{title}}
<div v-if="index % 2 === 0" class="switch-btn-wrapper"
@click="getCategoriesTitle(switchOn ? 'archetecture' : 'not')"
>
<div class="switch-btn" :class="{'switch-on': switchOn}"
>
</div>
</div>
</div>
<div class="accordion"
v-for="(item, index) in NAV_TITLES"
:key="`${item}_${index}`">
<ul>
<div class="accordion__submenu submenu">
<li
:class="['submenu submenu__item', {'active': index === activeItem}]"
@click="getCategoriesItem(item, index)"
>{{item}}
</li>
</div>
</ul>
</div>
</div>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex';
export default {
name: 'NavMenu',
data: () => ({
activeIndex: 1,
activeItem: null,
isActive: false,
switchOn: true,
}),
computed: {
...mapGetters(['NAV_LINKS', 'NAV_TITLES']),
},
methods: {
...mapMutations(['CHANGE_CURRENT_MENU', 'CHANGE_CURRENT_TITLE']),
getCategoriesTitle(title, index) {
this.CHANGE_CURRENT_TITLE(title)
this.switchOn = !this.switchOn
this.activeIndex = this.activeIndex === index ? this.activeIndex : index
},
getCategoriesItem(navItem, index) {
this.CHANGE_CURRENT_MENU(navItem)
this.activeItem = this.activeItem === index ? this.activeItem : index
},
}
}
</script>