Open one UL @click in a loop generated menu with Vuejs

Question

Still working on my menu and struggling with a new problem. I want the user to be able to the LI submenus when there is a click on the UL. The problem is that I don't see how to aim only at the linked LI elements. When I click on any UL, it opens all the LI.

An easy way could be to create different UL in HTML, but I would like to keep this short generated with a loop menu.

How can I aim at the precise UL with the @click event, to open only its child LI?

new Vue({
  el: "#app",
  data: {
    categories: {
        Atoms: ['Buttons', 'Icons'],
        Molecules: [],
        Organisms: [],
        Templates: [],
        Utilities: ['Grid']
      },
      openSubCategories: false,
  },
})

	.doc_nav {
		display: flex;
    justify-content: around;
	}

  .doc_nav__ul {
    margin: 0 30px;
  }

  .doc_nav__li {
    text-align: center;
  }
  
  .doc_nav__li:first-child {
    margin-top: 20px;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
 <header class="doc_header">
    <nav class="doc_nav">
      <ul @click="openSubCategories = !openSubCategories" class="doc_nav__ul" v-for="[ category, subCategories ] in Object.entries(categories)" :key="category"> {{category}}
        <template v-if="openSubCategories == true" >
          <li class="doc_nav__li" v-for="subCategory in subCategories" :key="subCategory">
           {{ subCategory }}
          <!-- <router-link :to="subCategory"> {{ subCategory }} </router-link> -->
          </li>
        </template>
      </ul>
    </nav>
  </header>
</div>

gao.xiangyang · Accepted Answer · 2020-02-13 11:41:57Z

1

Use CSS to hide li. I think you can handle it.

new Vue({
  el: "#app",
  data: {
    categories: {
      Atoms: ['Buttons', 'Icons'],
      Molecules: [],
      Organisms: [],
      Templates: [],
      Utilities: ['Grid']
    },
    currentActiveCategory: null,
  },
  method: {
    changeClickUl(category) {
      if (category == this.currentActiveCategory) this.currentActiveCategory = null
      else this.currentActiveCategory = category
    }
  }
})

.doc_nav {
  display: flex;
  justify-content: around;
}

.doc_nav__ul {
  margin: 0 30px;
}

.doc_nav__ul:not(visible) {
  display: none;
}

.doc_nav__li {
  text-align: center;
}

.doc_nav__li:first-child {
  margin-top: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <header class="doc_header">
    <nav class="doc_nav">
      <ul @click="changeClickUl(category)" :class="{visible:currentActiveCategory==category}" class="doc_nav__ul" v-for="[ category, subCategories ] in Object.entries(categories)" :key="category"> {{category}}
        <li class="doc_nav__li" v-for="subCategory in subCategories" :key="subCategory">
          {{ subCategory }}
          <!-- <router-link :to="subCategory"> {{ subCategory }} </router-link> -->
        </li>
      </ul>
    </nav>
  </header>
</div>

answered Feb 13, 2020 at 11:41

gao.xiangyang

9110 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Grégory Huyghe Over a year ago

Thanks. I was able to build my own code on top of yours and it works. But too many errors. I can't accept your answer as the one, just a up vote ;)

gao.xiangyang Over a year ago

haha.Forgive me for not debugging the code, because I usually like to give people an idea.

Grégory Huyghe · Accepted Answer · 2020-02-13 14:04:13Z

Here is the corrected and working answer of gao.xiangyang

It is using css. A solution without css: v-if="currentActiveCategory==category"

new Vue({
  el: "#app",
  data: {
    categories: {
      Atoms: ['Buttons', 'Icons'],
      Molecules: [],
      Organisms: [],
      Templates: [],
      Utilities: ['Grid']
    },
    currentActiveCategory: null,
  },
  methods: {
    displaySubCategories(category) {
      if (category == this.currentActiveCategory) {
      this.currentActiveCategory = null
    } 
    else this.currentActiveCategory = category
    }
  }
})

.doc_nav {
  display: flex;
  justify-content: around;
}

.doc_nav__ul {
  margin: 0 30px;
}

.doc_nav__li:not(visible) {
display: none;
}

.doc_nav__li--visible {
display: block !important;
}

.doc_nav__li {
  text-align: center;
}

.doc_nav__li:first-child {
  margin-top: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <header class="doc_header">
    <nav class="doc_nav">
      <ul @click="displaySubCategories(category)" class="doc_nav__ul" v-for="[ category, subCategories ] in Object.entries(categories)" :key="category"> {{category}}
        <li :class="{'doc_nav__li--visible' : currentActiveCategory==category}" class="doc_nav__li" v-for="subCategory in subCategories" :key="subCategory">
          {{ subCategory }}
          <!-- <router-link :to="subCategory"> {{ subCategory }} </router-link> -->
        </li>
      </ul>
    </nav>
  </header>
</div>

Collectives™ on Stack Overflow

Open one UL @click in a loop generated menu with Vuejs

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related