Подскажите, какие методы нужно использовать для 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>
`,
