vue multiple dropdown clicks show-CodePudding

I'm a vuejs newbie, I want to do the dropdown, whichever one is clicked, its menu will be opened, I wonder how can I do this? whichever dropdown is clicked i want the other to close. and also if I click the link from the "mobile" menu, the mobile class will be closed.

I apologize in advance for having trouble explaining myself.

<template>
    <li>
        <MenuLink
            :link="items"
            :key="items.name"
            @click.stop="clickShow()"
        />
        <ul  v-if="hasChild" :>
            <MenuItems
                v-for="subItem in items.children"
                :key="subItem.name"
                :items="subItem"
            />
        </ul>
    </li>

</template>
<script>

export default {
    name: 'MenuItems',
    components: {MenuLink},
    props: {
        items: {type: Object, required: true},
        level: {
            type: Number,
            default: 0
        }
    },
data() {
        return {
            childrenCount: 0,
            active: false,
            show: null,
            open: false,
        };
    },

CodePudding user response：

One of the ways to achieve that with class binding:

new Vue({
  el: '#demo',
  data() {
    return {
      show: null
    }
  }
})

.show {
  display: block;
}
.hide {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <div  >
    <button @click="show = null">menu</button>
    <ul : @click="show = 0">
      <li>
        <a href="#/home">Home</a>
      </li>
      <li>
        <a href="#/about">About</a>
      </li>
      <li>
        <a @click.stop="show = 1" href="#">Dropdown 1</a>
        <ul :>
          <li>
            <a href="#/dropdown11">Dropdown 1.1</a>
            <a href="#/dropdown12">Dropdown 1.2</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#/contact">Contact</a>
      </li>
      <li>
        <a @click.stop="show = 2" href="#">Dropdown 2</a>
        <ul :>
          <li>
            <a href="#/dropdown21">Dropdown 2.1</a>
            <a href="#/dropdown22">Dropdown 2.2</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

CodePudding user response：

You could try something like: https://vue-select.org/guide/install.html#yarn-npm The installation should be pretty straightforward.