переключение меню по нескольким сценариям vue

Question

Меню переключается по нажатию на кнопки 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>

Answer 1

исходя из вашего кода состояние меняется. обратите внимание на консоль. скорее всего не обновляется ДОМ. к сожалению, вы вставили в пример Vuex данные, к которым у меня нет доступа, чтобы более углубленно рассмотреть ваш пример и помочь.

new Vue({
    el: '#app',
    data: () => ({
        activeIndex: 1,
        activeItem: null,
        isActive: false,
        switchOn: true
    }),
    methods: {
        getCategoriesTitle(title, index) {
               this.switchOn = !this.switchOn
            this.activeIndex = this.activeIndex === index ? this.activeIndex : index
            console.log(this.switchOn);
            console.log(this.activeIndex);
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

    <div id="app">
           <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>

БЛОГ НА HUSL

переключение меню по нескольким сценариям vue

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