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

Question

[mrserg4102]

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

Вызов компонента 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>

Answer 1

[0xD34F]

В компоненте category вы забыли подписаться на событие toggled, генерируемое дочерними category (его следует пробрасывать в родителя). И вместо isActive (про него вы при создании дочерних category тоже почему-то забыли) наверное стоит передавать id элемента - а то непонятно, кого и на каком уровне вложенности надо считать активным.

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

Comments

[mrserg4102]

Большое спасибо! Крутой пример - попробую переделать.

[mrserg4102]

Ещё раз большое спасибо за решение! Может быть вы посоветуете как в данном случае вывести продукты конкретной категории - то есть при клике на ссылку отправляется ajax запрос и данные передаются в компонент Products. Вот как правильно передать если компонент Products располагается после Categories?

<div id="app">
  <categories
    :nodes="items"
    :active-id="activeId"
    @toggled="activeId = $event"
  ></categories>
  <products>
  </products>
</div>

[0xD34F]

mrserg4102, я бы попробовал сделать так: определить отдельное свойство под продукты категории. И отслеживать изменения activeId, запрашивая новые данные в watcher'e. Как-то так:

data() {
  return {
    activeId: null,
    productData: null
  }
},
watch: {
  activeId(val) {
    /*
      здесь делаете запрос данных по новой категории,
      при получении ответа кидаете его в productData
    */
  }
}

<products
  v-if="productData"
  :items="productData"
>
</products>

[mrserg4102]

0xD34F, Супер, спасибо!

[0xD34F]

mrserg4102, есть и более интересный вариант - кешировать результаты запросов, чтобы не выполнять их повторно для тех же id. Пусть productData будет хранить в себе несколько наборов данных - объект, ключами которого будут id категорий, значениями - соответствующие данные. Тогда watch не нужен, вместо этого перепишем обработку события toggled:

methods: {
  onToggled(id) {
    if (productData[id]) {
      // если данные уже есть, т.к. запрашивались ранее - просто устанавливаем активный id
      this.activeId = id
    } else {
      /*
        а иначе делаем запрос, кладём ответ в productData[id], устанавливаете activeId
        (или можете устанавливать activeId всегда сразу - тогда после клика по пункту меню
         и до получения ответа не будут отображаться никакие данные, можно даже
         показывать индикатор загрузки)
      */
    }
  }
}

<categories
  :nodes="items"
  :active-id="activeId"
  @toggled="onToggled"
></categories>
<products
  v-if="productData[activeId]"
  :items="productData[activeId]"
>
</products>