Древовидное меню. Как сделать чтобы дерево открывалось при нажатии на пункт меню?

Для создания древовидного меню в Vue.js, которое будет открываться при нажатии на пункт меню, можно воспользоваться следующим подходом:

1. Создайте компонент для отдельного элемента меню. Этот компонент будет отображать определенный пункт меню и, если у него есть вложенные элементы, отображать их при необходимости.

<template>
  <div>
    <div @click="toggleChildren">{{ menuItem.label }}</div>
    <div v-if="menuItem.children && isOpen">
      <menu-item v-for="child in menuItem.children" :key="child.id" :menu-item="child"></menu-item>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    menuItem: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      isOpen: false
    };
  },
  methods: {
    toggleChildren() {
      this.isOpen = !this.isOpen;
    }
  }
};
</script>

2. Создайте главный компонент для древовидного меню, в котором будет храниться список всех пунктов меню и их иерархия.

<template>
  <div>
    <menu-item v-for="menuItem in menuItems" :key="menuItem.id" :menu-item="menuItem"></menu-item>
  </div>
</template>

<script>
import MenuItem from './MenuItem';

export default {
  components: {
    MenuItem
  },
  data() {
    return {
      menuItems: [
        {
          id: 1,
          label: 'Menu 1',
          children: [
            {
              id: 2,
              label: 'Sub Menu 1',
              children: []
            },
            {
              id: 3,
              label: 'Sub Menu 2',
              children: [
                {
                  id: 4,
                  label: 'Sub Sub Menu 1',
                  children: []
                }
              ]
            }
          ]
        }
      ]
    };
  }
};
</script>

3. В данном примере, компонент MenuItem будет рекурсивно отображать вложенные элементы меню при клике на родительский элемент.

4. При нажатии на элемент меню его вложенные элементы будут отображаться или скрываться в зависимости от текущего состояния isOpen.

Это основной принцип для реализации древовидного меню в Vue.js. Вы можете настраивать стили и структуру меню с помощью CSS и изменять логику работы меню в соответствии с требованиями вашего проекта.