Afficher les enfants uniquement lorsque le parent est cliqué dans vuejs

Question

J'essaie de créer une barre latérale de navigation. Il y aura des projets principaux et des sous-projets.

J'essaie d'afficher les éléments enfants uniquement lorsque l'on clique sur l'élément parent et je souhaite que l'élément enfant actif ait une couleur différente lorsque je clique sur l'élément enfant. Comment puis-je y parvenir ?

Voici ce que j'ai essayé jusqu'à présent.

<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

Essayez quelque chose comme l'extrait ci-dessous (vous en avez manqué un autre ul dans le lien imbriqué, puis utilisez simplement l'index de la liste pour afficher/masquer la navigation) :

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;
}

sssccc

  

    

      

        

          
            
              {{ link.text }}
            
          
          
 
            

               
                
                  {{ link.text }}