[Vuejs]-Vue multiple dropdown clicks show

by

0👍

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 class="mobil" >
    <button @click="show = null">menu</button>
    <ul :class="show === 0 ? 'hide' : 'show'" @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 :class="show === 1 ? 'show' : 'hide'">
          <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 :class="show === 2 ? 'show' : 'hide'">
          <li>
            <a href="#/dropdown21">Dropdown 2.1</a>
            <a href="#/dropdown22">Dropdown 2.2</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

Leave a comment