仅当在vuejs中单击父项时显示子项

Question

我正在尝试创建一个导航侧边栏。将有主要项目，也将有子项目。

我试图只在单击父项时显示子项，而当我单击子项时，我希望它的颜色与活动子项不同。我该如何做到这一点？

这就是我迄今为止所尝试的。

<template>
<div>
<nav>
<ul>
<li v-for="(link, index) in navLinks" :key="index">
<router-link :to="link.path" class-active="active">
<span class="items">
{{ link.text }}
</span>
</router-link>
<div v-if="link.sublinks && link.sublinks.length > 0"> //I want it to show only when the parent item is clicked
<li v-for="(link, index) in belowLinks" :key="index">
<router-link :to="link.path" class-active="sub-active"> //trying to add the sub-active class but it's not working
<span class="sub-items">
{{ link.text }}
</span>
</router-link>
</li>
</div>
</li>
</ul>
</nav>
</div>
</template>
<script>
export default {
data() {
return {
navLinks: [
{
text: 'Contact',
path: '/contact',
sublinks: [
{
text: 'Email',
path: '/email',
},
],
},
{
text: 'About',
path: '/about',
},
],
belowLinks: [
{
text: 'Blog',
path: '/blog',
},
{
text: 'Portfolio',
path: '/portfolio',
},
],
};
},
};
</script>
<style scoped >
nav {
height: 100vh;
display: flex;
flex-direction: column;
background: #040521;
justify-content: space-between;
}
ul {
display: flex;
align-items: center;
margin-block-start: 0;
margin-block-end: 0;
padding-inline-start: 0;
flex-direction: column;
}
a {
text-decoration: none;
display: flex;
align-items: center;
color: white;
}
a:hover {
color: white;
}
li {
list-style-type: none;
padding: 10px 0px;
width: 100%;
}
.page-link .active,
.router-link-active {
background-color: green;
color: white !important;
border-color: inherit !important;
}
.sub-active {
background-color: yellow !important;
color: white !important;
border-color: inherit !important;
}
.items {
padding: 10px 20px;
}
.sub-items {
padding: 10px 0px 10px 40px;
}
</style>

Answer 1

尝试如下片段(您在嵌套链接中错过了另一个ul，然后只需使用列表索引切换显示/隐藏导航(：

new Vue({
el: "#demo",
data() {
return {
navLinks: [
{text: 'Contact', path: '/contact', sublinks: [{ text: 'Email', path: '/email',},],
},
{text: 'About', path: '/about',},
],
belowLinks: [
{text: 'Blog', path: '/blog',},
{text: 'Portfolio', path: '/portfolio',},
],
show: null,
active: null
}
},
methods: {
toggleNav(i) {
this.active = null
this.show === i ? this.show = null : this.show = i
},
setActive(i) {
this.active === i ? this.active = null : this.active = i
}
}
})

nav {
height: 100vh;
display: flex;
flex-direction: column;
background: #040521;
justify-content: space-between;
}
ul {
display: flex;
align-items: center;
margin-block-start: 0;
margin-block-end: 0;
padding-inline-start: 0;
flex-direction: column;
}
a {
text-decoration: none;
display: flex;
align-items: center;
color: white;
}
a:hover {
color: white;
}
li {
list-style-type: none;
padding: 10px 0px;
width: 100%;
}
.page-link .active,
.router-link-active {
background-color: green;
color: white !important;
border-color: inherit !important;
}
.sub-active {
background-color: yellow !important;
color: white !important;
border-color: inherit !important;
}
.items {
padding: 10px 20px;
}
.sub-items {
padding: 10px 0px 10px 40px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<div>
<nav>
<ul>
<li v-for="(link, index) in navLinks" :key="index" >
<a :to="link.path" class-active="active" @click="toggleNav(index)">
<span class="items">
{{ link.text }}
</span>
</a>
<ul v-if="link.sublinks && link.sublinks.length > 0 && show === index"> 
<li v-for="(link, idx) in belowLinks" :key="idx" @click="setActive(idx)">
<a :to="link.path" :class="active === idx ? 'sub-active' : ''" > 
<span class="sub-items">
{{ link.text }}
</span>
</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>