I am facing a situation with two components - Header.vue and Sidebar.vue
In Header.vue, there is a button that when clicked should change the value of a property in Sidebar.vue
The template code in Header.vue looks like this:
<a v-on:click="toggleSidebar">Toggle</a>
And the method used is:
toggleNavbar: function() {
this.toggleSidebar(this.showSidebar)
}
In Sidebar.vue, the template code is:
<div class="sidebar sidebar_display_none" :class="showSidebar?'show':''">
With the following method defined:
created() {
this.showSidebar= this.toggleSidebar(this.showSidebar)
console.log(this.showSidebar)
}
A mixin is also used with the toggleSidebar method to switch the state.
toggleSidebar: function(currentState) {
return !currentState
}
The goal is to show/hide the Sidebar when clicking the Toggle button. The showSidebar property is boolean.
If you have any suggestions, I would greatly appreciate it. Thank you!