Как на Vue сделать такое выпадающее меню?

Question

[Andrej Sharapov]

Доброе утро всем!

Составил такое меню во vue компоненте



но потребовалось для пункта три (three) добавить вложенное меню. Я вынес вложенность в childred, но не пойму как перестроить шаблон и реализовать клик по третьему пункту. Нужна ваша помощь.

Comments

[Andrej Sharapov]

0xD34F, легче не стало ( не могу сообразить. в голову приходит только перестраивание основных ссылок руками в html и уже потом встраивать дочерний список

[hzzzzl]

0xD34F, а если пожаловаться на коммент от Куратора тега JavaScript, то жалоба придет Куратору тега JavaScript или кому-то другому?

[0xD34F]

hzzzzl, кому-то другому.

[hzzzzl]

Andrej Sharapov, это не я пожаловался на первый, я просто интересуюсь :D
а точно childred, не children?

[Andrej Sharapov]

hzzzzl, да, спасибо. ох уж это рукожопство)

Answer 1

[Andrej Sharapov]

Разобрался

<ul>
        <li v-for="item in navList">
            <a :href="item.url" :class="item.cls" :title="item.name" @click="isOpen = !isOpen">{{ item.name }}
                <ul v-if="item.children" :class="{ isOpen }" class="dropdown">
                    <li v-for="{ url, name, index } in item.children" :key="index">
                        <a :href="url" :title="name">{{ name }}
                     </li>
                </ul>
             </a>
        </li>
    </ul>

Answer 2

[shmatuan]

Лучше посмотрите тут
https://vuejs.org/v2/examples/tree-view.html

Comments

[Andrej Sharapov]

не помогло ( мозгов пока не хватает