I am new to using Vue and I am trying to create a vertical navigation bar. When the menu icon is clicked, the navbar should toggle.
Here is my menu icon code:
<button type="button" id="sidebarCollapse" class="btn btn-info [collapsed?'':'sidebar']" >
<i class="fas fa-align-left"></i>
</button>
When the menu icon is toggled, I want to show the nav sidebar.
<nav id="sidebar" class="sidebar">
</nav>
Here is my Vue code:
new Vue({
e1:'#app',
data:{
collapsed:true
}
})
Nothing is displaying and I am new to Vue. Can anyone help me figure out what is wrong?
Updated Code
Position.vue
<template>
<div class="wrapper">
<nav id="sidebar" class="sidebar" v-if="showSidebar">
<ul class="list-unstyled component">
<li class="active">
<a href="#homeSubMenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Home</a>
<ul class="collapse list-unstyled" id="homeSubMenu">
<li class="dropdown-menu-mn">
<a href="#">Home1</a>
<a href="#">Home2</a>
</li>
</ul>
</li>
</ul>
</nav>
<div id="content">
<nav>
<div class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button type="button" id="sidebarCollapse" class="btn btn-info" @click="toggleSidebar">
<i class="fas fa-align-left"></i>
</button>
</div>
</div>
</nav>
</div>
</div>
</template>
<script>
new Vue({
el:'#app',
data: {
showSidebar: false
},
methods: {
toggleSidebar: function() {
this.showSidebar = !this.showSidebar;
}}})
</script>
update script tag
<script>
export default{
data() {
showSidebar: false
},
toggleSidebar(){
this.showSidebar = !this.showSidebar;
} };
</script>
However, it still does not work. Only the menu button appears but the toggle functionality is not working. Can anyone point out where I am making a mistake?