[Vuejs]-VueJS Material.io Drawer component variable binding

by

0👍

✅

I’m not a Vue pro – still learning it myself – but I think I can see what is going on here.

I think the warning in particular is because you have a prop AND a data property of the same name. Try removing the data setting. You can change the props setting to this:

props: {
    showSidebar: {
        type: Boolean,
        default: false
    }
}

See if that fixes it. Also, given how you seem to be using this, I’d suggest looking into using Vuex. The documentation is good and it could really help manage your app. Possibly even fix that issue with reopening the drawer.

Edit:

After reviewing this user’s code more closely (connected with them on discord), I’ve determined the issue is that while the process of opening the sidebar was managed by a property on the parent component, the act of closing it was strictly occurring in the child. When you have data bound like that from parent to child, you need to be sure to update the source (the parent component) of the relevant changes. In Vue, those changes are only pushed one direction. To pass info up to the parent, you have to $.emit events.

My current recommendation is to add a custom event to the sidebar component tag on the parent component:

<Sidebar v-bind:showSidebar="showSidebar" v-on:hide-sidebar="showSidebar=false"></Sidebar>

And then change the close tag in the child component to this:

<span class="md-title" @click="$emit('hide-sidebar')">FleaMaster</span>

Hopefully this information helps someone else as well!

Leave a comment