update;
<template>
<div class="container">
<div class="dropdown">
<button class="btn btn-default" @click="toggleDropdown">Tutorials <span class="caret"></span></button>
<ul class="dropdown-menu" v-show="dropdownOpen" @click.stop="">
<li>
<a href="#">HTML</a>
</li>
<li>
<a href="#">CSS</a>
</li>
<li class="dropdown-submenu">
<a href="#" @click="toggleSubmenu">New dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" v-show="submenuOpen">
<li>
<a href="#">2nd level dropdown</a>
</li>
<li>
<a href="#">2nd level dropdown</a>
</li>
<li class="dropdown-submenu">
<a href="#" @click="toggleSubmenu">Another dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" v-show="submenuOpen">
<li>
<a href="#">3rd level dropdown</a>
</li>
<li>
<a href="#">3rd level dropdown</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
data() {
return {
dropdownOpen: false,
submenuOpen: false
};
},
methods: {
toggleDropdown() {
this.dropdownOpen = !this.dropdownOpen;
},
toggleSubmenu() {
this.submenuOpen = !this.submenuOpen;
}
}
};
</script>
<style>
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
</style>
it is not working and there is no error in my console.. idk how can i make a nested dropdown menu in vuejs 2 ?
