Madeas
@Madeas
UI / UX Designer, Frontend Developer

Как перестроить шаблон?

Подскажите, какие методы нужно использовать для v-if v-else, чтобы применить тот или иной шаблон относительно наличия дочерних элементов у навигации?

Сейчас этот шаблон работает, но он генерирует вложенное меню для всех ссылок...

template: `
    <ul>
        <li v-for="item in navList">
            <a :href="item.url" :class="item.cls" :title="item.name" @click="isOpen = !isOpen">{{ item.name }}
                <ul :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>
    `


экспериментальный шаблон

Vue.component('navigation', {
    props: ['item'],
    data() {
        return {
            isOpen: true,
            navList: [
                { url: '/#about', cls: 'about', name: 'О компании' },
                { url: '#', cls: 'services', name: 'Услуги',
                    children: [
                        { url: '/epb', cls: '', name: 'Экспертиза' },
                    ]
                },
        }
    },
    template: `    
    <ul>
        <li v-for="item in navList">
            <template v-if="">
                <a :href="item.url" :class="item.cls" :title="item.name">{{ item.name }}</a>
            </template>
            <template v-else>
                <a :href="item.url" :class="item.cls" :title="item.name" @click="isOpen = !isOpen">{{ item.name }}
                    <ul :class="{ isOpen }" class="dropdown">
                        <li v-for="{ url, name, index } in item.children" :key="index">
                            <a :href="url" :title="name">{{ name }}
                        </li>
                    </ul>
                </a>
            </template>
        </li>
    </ul>
    </template>
    `,
  • Вопрос задан
  • 55 просмотров
Решения вопроса 1
@nvdfxx
Senior Pomidor developer
<ul v-if="item.children" :class="{ isOpen }" class="dropdown">
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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