Vue.js компонент nav активный класс применяется только при втором клике - PullRequest
Новая
       21

Vue.js компонент nav активный класс применяется только при втором клике

0 голосов
/ 11 июня 2018

У меня есть компонент меню, который находится внутри представления, доступ к этому представлению осуществляется по его собственному маршруту (/ как это работает).В этом представлении я загружаю компонент заголовка, который выглядит следующим образом: 

<nav class="nav">
    <ul class="top-menu">
        <li v-for="menu in menuItems" v-bind:key="menu.id" v-bind:class="{'active' : menu.active}" v-on:click="setActiveMenu(menu)">
            <router-link :to="menu.url">{{ menu.name }}</router-link>
        </li>
    </ul>
    <div class="get-started">
        <router-link to="/">Get Started</router-link>
    </div>
</nav>

Проблема в том, что всякий раз, когда я посещаю этот маршрут, я могу проверить, что menu.active истинно, но класс active нене срабатывает.Однако, если я уже нахожусь в маршруте / how-it-works, то он работает как должен, но только для этого маршрута.Кажется, не работает навигация по маршрутам.Функция setActiveMenu выглядит следующим образом: 

setActiveMenu: function(menu) {
    for (let i = 0; i < this.menuItems.length; i++) {
        this.menuItems[i].active = false;
    }
    menu.active = true;
}

Наконец, массив меню выглядит следующим образом: 

menuItems: [
    {
        name: 'How It Works',
        url: '/how-it-works',
        id: 1,
        active: false
    },
    {
        name: 'Page 2',
        url: '/',
        id: 2,
        active: false
    },
    {
        name: 'Page 3',
        url: '/',
        id: 3,
        active: false
    },
    {
        name: 'Page 4',
        url: '/',
        id: 4,
        active: false
    },
    {
        name: 'Page 5',
        url: '/',
        id: 5,
        active: false
    },
    {
        name: 'Page 6',
        url: '/',
        id: 6,
        active: false
    }
]

Я предполагаю, что моя проблема в том, как я отношусь кактивное состояние при создании компонента, или некоторые проблемы с навигацией между маршрутами.Как правильно манипулировать заголовком?

1 Ответ

0 голосов
/ 11 июня 2018

Просто понял ... вместо добавления события щелчка я использовал метод created, встроенный в vue.js: 

created() {
    for (let i = 0; i < this.menuItems.length; i++) {
        this.menuItems[i].active = false;
        if (this.menuItems[i].url === this.$router.currentRoute.path) {
            this.menuItems[i].active = true;
        }
    }
}

Мне все еще интересно, является ли это лучшим способом сделатьэто?

...