Estoy tratando de crear una barra lateral de navegación. Habrá artículos principales y también habrá artículos secundarios.
Estoy tratando de mostrar el elemento secundario solo cuando se hace clic en un elemento principal y cuando hago clic en un elemento secundario, quiero que tenga un color diferente para el elemento secundario activo. ¿Cómo logro esto?
Esto es lo que he intentado hasta ahora.
<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>Intente seguir el siguiente fragmento (se perdió otra ul en los enlaces anidados, y luego simplemente alterna mostrar/ocultar la navegación con el índice de la lista):
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>