Presently, I am delving into VueJS and experimenting with .
I have crafted an application with multiple pages, each featuring a sidebar (utilizing the drawer component ).
To avoid repetitive code, I aim to create a single sidebar component that can be imported onto every page.
Everything is working smoothly so far.
However, I now wish to implement functionality that allows me to toggle the sidebar open and closed. When the sidebar was embedded directly in the page, toggling its visibility was straightforward - a simple boolean variable assignment would suffice. However, synchronizing this property across components seems challenging to me now.
Let me demonstrate the current code structure to highlight the issue:
This is the page component:
<md-toolbar class="md-primary">
<md-button class="md-icon-button" @click="showSidebar=true">
<md-icon>menu</md-icon>
</md-button><span class="md-title">Dashboard</span>
</md-toolbar>
<Sidebar v-bind:showSidebar="showSidebar"></Sidebar>
That's the Vue Structure - you can see how I'm binding the showSidebar property within the page.
import Sidebar from './sidebar.vue';
export default {
data: function () {
return {
showSidebar: false
}
},
components: {
Sidebar: Sidebar
},
Now, let's delve into the Sidebar component itself:
<md-drawer v-bind:md-active.sync="showSidebar">
The sidebar component retrieves the value through a property like this:
export default {
name: 'sidebar',
props: ['showSidebar'],
It seems to be functioning correctly! I can click on the menu button on the page, set the property to true, and the sidebar appears! However, upon clicking outside of the sidebar, a warning message is displayed. Moreover, I encounter difficulty reopening it on subsequent clicks without refreshing the page.
How can I resolve this issue? I considered using events since the drawer component seems to listen for them, but my attempts were unsuccessful. Here's the current code from the drawer component: https://github.com/vuematerial/vue-material/blob/dev/src/components/MdDrawer/MdDrawer.vue
I hope I've articulated my problem clearly.
If anyone could offer assistance, I would greatly appreciate it.
This marks my first question here, so please extend your kindness :)
/EDIT: Oops, here is the warning message:
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value.
Prop being mutated: "showSidebar"