Search code examples
vue.jstogglebootstrap-vue

toggle b-sidebar with an icon in Vue

I am having a sidebar using bootstrap-vue. I use 2 icons to toggle this sidebar. When clicking on an icon, I use a function(){isOpen = !isOpen} with isOpen initialized to false to toggle the sidebar and change the icon from bars to close and it works great. Inside the sidebar, I have a ul tag and a few li tags with router-link. My problem is that when I use the router-link to another route, the icon still doesn't change because now isOpen is true. How can I make isOpen to false when clicking on a router-link. I think I need to bind the icon to some property of the b-sidebar, but I can't find it. Please help me! Here is a picture of the problem I'm having.

This is still working. The sidebar is opening and the icon changes to close icon enter image description here

This is the problem I'm having. I router-link to the About Us screen and the icon is still the close icon. It should have been the bars icon enter image description here

Solution

  • If isOpen is part of the component's data object (I assume so, but you didn't provide enough info), you can set @click listener on your li tags and make a method that will toggle it: Template:

    <li @click="closeSidebar">My link</li>

    Script:

    ...
methods: {
    closeSidebar() {
        this.isOpen = false;
    }
}