@annaelinevich

Как связать переключение меню с тумблером?

Меню переключается по нажатию на кнопки 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>
  • Вопрос задан
  • 43 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы