search

Home  >  Q&A  >  body text

Show children only when parent is clicked in vuejs

I'm trying to create a navigation sidebar. There will be main projects and sub-projects.

I'm trying to show the child items only when the parent item is clicked, and I want the active child item to have a different color when I click on the child item. How do I achieve this?

Here's what I've tried so far.

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

P粉574695215P粉574695215303 days ago429

reply all(1)I'll reply

  • P粉132730839

    P粉1327308392024-02-26 17:50:45

    Try a snippet like below (you missed another ul in the nested link, then just use the list index to toggle show/hide 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;
    }
    
    

    reply
    0
  • Cancelreply