@mrserg4102

Как присваивать активный класс ссылкам в рекурсивном меню на Vue.js?

Столкнулся с такой задачей как рекурсивное меню. Само меню реализовать получилось - при клике ссылкам присваивается активный класс и открываются вложенные пункты - застрял на том как присвоить активный класс к ссылкам во вложенных компонентах.

Вызов компонента Categories в шаблоне:

<div id="app">
                <categories :categories="{{ $categories }}"></categories>
            </div>

Компонент Categories:

<template>
    <aside class="menu">
        <ul class="menu-list">
            <category
                    v-for="(category, index) in categories"
                    :key="index"
                    :id="category.id"
                    :label="category.name"
                    :nodes="category.children"
                    :is-active="activeItem == category.id"
                    @toggled="onToggle"
            >
            </category>
        </ul>
    </aside>
</template>

<script>
    import Category from './Category.vue'

    export default{
        props:['categories'],
        data(){
          return {
              activeItem: null
          }
        },
        components: { Category },
        methods:{
            onToggle(index){
                this.activeItem = index;
            }
        }
    }
</script>

Компонент Category:

<template>
    <li>
        <a href="#" v-text="label" @click="toggleChildren" :class="{'is-active': isActive}"></a>

        <ul>
            <category
                    v-if="showChildren"
                    v-for="(node, index) in nodes"
                    :key="index"
                    :nodes="node.children"
                    :label="node.name"
                    :id="node.id"
            >
            </category>
        </ul>
    </li>
</template>

<script>
    export default {
        props: [ 'label', 'nodes', 'id', 'isActive'],
        data() {
            return {
                showChildren: false
            }
        },
        name: 'category',
        methods: {
            toggleChildren() {
                this.showChildren = !this.showChildren;
                this.$emit('toggled', this.id);
            }
        }
    }
</script>
  • Вопрос задан
  • 473 просмотра
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
В компоненте category вы забыли подписаться на событие toggled, генерируемое дочерними category (его следует пробрасывать в родителя). И вместо isActive (про него вы при создании дочерних category тоже почему-то забыли) наверное стоит передавать id элемента - а то непонятно, кого и на каком уровне вложенности надо считать активным.

Ну и в целом - зачем два компонента для построения вложенного меню? Как-то сложновато получается. Достаточно и одного. Например.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы