Sidebar dropdown menu doesn't open when clicked on dropdown button

Question

I am developing an application using VueJS and Bootstrap.

There is a sidebar that I have created. The sidebar has options such as Files, Email, Social, App Data.

The code for the Sidebar is shown below:

 export default { data(){ return{ open: false } }, methods:{ toggle(){ const sideBar = document.getElementsByClassName("side-bar"); if(this.open === true){ this.open = false; sideBar[0].style.width = "200px"; } else if(this.open === false){ this.open = true; sideBar[0].style.width = "73px"; } } }, mounted(){ this.open = false; this.toggle(); var dropdown = document.getElementsByClassName("dropdown-btn"); console.log(dropdown); var i; for (i = 0; i < dropdown.length; i++) { dropdown[i].addEventListener("click", function() { var dropdownContent = this.nextElementSibling; if (dropdownContent.style.display === "block") { dropdownContent.style.display = "none"; } else { dropdownContent.style.display = "block"; } }); } } } 

 .openbtn:focus{ outline: none; } /* .sidebar-footer{ position: absolute; width: 197px; height: 41px; bottom: 0; background: #3F51B5; transition: 0.5s; } */ .sidebar:after, body > .navbar-collapse:after{ background: linear-gradient(to bottom, #F5F5F5 0%, #F5F5F5 100%) } .sidebar .sidebar-wrapper .sidenav { height: 100%; width: 200px; z-index: 1; top: 0; left: 0; background-color: #F5F5F5; overflow-x: hidden; padding-top: 20px; transition: 0.5s; } /* Style the sidenav links and the dropdown button */ .sidenav a, .dropdown-btn { padding: 6px 8px 6px 16px; text-decoration: none; font-size: 20px; color: #818181; display: block; border: none; background: none; width:100%; text-align: left; cursor: pointer; outline: none; transition: 0.5s; } /* On mouse-over */ .sidenav a:hover, .dropdown-btn:hover { color: #E91E63; border: 0px; transition: 0.5s; } /* Add an active class to the active dropdown button */ .active { color: #E91E63; transition: 0.5s; } /* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */ #dropdown-container { display: none; background-color: #FAFAFA; transition: 0.5s; } /* Optional: Style the caret down icon */ .fa-caret-down { float: right; padding-top: 2px; padding-right: 60px; } .sidebar .sidebar-wrapper .sidenav { padding-top: 75px; transition: 0.5s; } .fa { width: 1.28571429em; text-align: center; transition: 0.5s; } .openbtn { padding: 0px 25px 0px 20px; background-color: #F5F5F5; border: none; outline: none; margin-top: 13px; margin-bottom: 28px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div class="sidebar"> <div class="sidebar-wrapper"> <div class="sidenav"> <button v-if="open === true" @click="toggle" class="openbtn"> <svg x="25px" y="85px" width="24px" height="26px" viewBox="0 0 50 50" style="transform: scaleX(1);" fill="rgb(33,33,33)"> <path d="M0,39h50v2H0V39z M0,26h50v-2H0V26z M0,9v2h50V9H0z"></path> </svg> </button> <button v-else @click="toggle" style="float: right" class="openbtn"> <svg width="26px" height="25px" viewBox="0 0 32 32"> <g id="icomoon-ignore"></g> <path d="M29.312 15.992c0-7.366-5.97-13.337-13.337-13.337s-13.337 5.97-13.337 13.337 5.97 13.337 13.337 13.337 13.337-5.97 13.337-13.337zM3.706 15.992c0-6.765 5.504-12.27 12.27-12.27s12.27 5.505 12.27 12.27-5.505 12.27-12.27 12.27c-6.765 0-12.27-5.505-12.27-12.27z" fill="#000000"/> <path d="M12.792 15.231l-0.754 0.754 6.035 6.035 0.754-0.754-5.281-5.281 5.256-5.256-0.754-0.754-3.013 3.013z" fill="#000000"/> </svg> </button> <div v-if="this.open === false"> <button class="dropdown-btn" style="font-size: 16px; outline: none"> <i class="far fa-fw fa-file"></i><span style="color: #212121"> Files</span> <i class="fa fa-caret-down" style="color: #080404"></i> </button> <div id="dropdown-container"> <a href="#" style="font-size: 16px;"><i class="far fa-fw fa-clock"></i> Recent</a> <a href="#" style="font-size: 16px;"><i class="far fa-fw fa-star"></i> Starred</a> <a href="#" style="font-size: 16px;"><i class="fa fa-fw fa-share-alt"></i> Shared with me</a> <a href="#" style="font-size: 16px;"><i class="far fa-fw fa-clock"></i> Shared by me</a> <a href="#" style="font-size: 16px;"><i class="fa fa-fw fa-trash"></i> Trash</a> </div> <button class="dropdown-btn" style="font-size: 16px; outline: none"> <i class="far fa-fw fa-envelope-open"></i><span style="color: #212121"> Email</span> <i class="fa fa-caret-down" style="color: #080404"></i> </button> <div id="dropdown-container"> </div> <button class="dropdown-btn" style="font-size: 16px; outline: none"> <i class="fa fa-fw fa-bullhorn" style="width: 1.28571429em"></i><span style="color: #212121"> Social</span> <i class="fa fa-caret-down" style="color: #080404"></i> </button> <div id="dropdown-container"> </div> <button class="dropdown-btn" style="font-size: 16px; outline: none"> <i class="fa fa-fw fa-database"></i><span style="color: #212121"> App Data</span> <i class="fa fa-caret-down" style="color: #080404"></i> </button> <div id="dropdown-container"> </div> </div> </div> </div> </div> 

When I try clicking on the Files dropdown button, it's corresponding container menu doesn't appear.

What wrong am I doing here? I'd love some help on it. Thanks in advance!

Answer 1

Ok so,

I see lot of things in your code,

1. Inside your template you never need to use the keyword 'this' everything you do are already inside the component scope.

2. You don't need to add 'open === true', 'open' is sufficient

3. When you use a library like VueJS the DOM is rerendered when you updated the state so if you modify your HTML content directly the change will be discard after the next update

Remove this and prefer using conditional styles

sideBar[0].style.width = "200px";

You also need to remove everything inside the 'mounted' function. Event should be used with the @eventname on the HTML component and use the default state if you want your navbar to be open by default.

Fixing all this things will make your code more clear and have a big chance to make your code work