Toggle sidebar from Vue method?

Question

In a I would like to create an action on each items so I have a button:

Then I have a Form in a sidebar

...

In my methods I would like to respond to the action:

methods: {
    doIt(id) {
        sidebar.form.id = id
        sidebar.show().onSubmit(() => {
           axio...
           refresh()
        })
    }
}

Of course, this last part is not valid. On Bootstrap Vue manual I didn't find how to interact from Vue to Bootstrap components. Any clue?

user_8397974 · Answer

You can emit an event on $root, which can be used to toggle the sidebar. The second parameter being the id of the sidebar you wish to open. this.$root.$emit('bv::toggle::collapse', 'my-sidebar-id')

and listens for the same event, which is why it says collapse in the event.

new Vue({
  el: '#app',
  methods: {
    openSidebar() {
      this.$root.$emit('bv::toggle::collapse', 'my-sidebar')
    }
  }
})








  
    My sidebar
  

  
    Open sidebar

Alternatively you can bind a boolean property to the v-model on the sidebar and set the boolean to true when you want to open the sidebar.

new Vue({
  el: '#app',
  data() {
    return {
      isSidebarOpen: false
    }
  },
  methods: {
    openSidebar() {
      this.isSidebarOpen = true
    }
  }
})








  
    My sidebar
  

  
    Open sidebar

user_8463002 · Answer

Also, you can use one of the sidebar built-in public methods show, hide or toggle. All you need is add a reference to your sidebar

...

and then in any of your methods where/when it's needed, you can simply call any of them

this.$refs.mysidebar.show();
this.$refs.mysidebar.hide();
this.$refs.mysidebar.toggle();

user_8184342 · Answer

You can also just assign a boolean value to the visible prop on the b-sidebar component and toggle the boolean value as you like.

...

And toggling it:

data: {
   showSidebar: false, //starts off invisible
},
methods: {
   toggleSidebar(){
      this.showSidebar = !this.showSidebar
   }
}

This approach at first glance is not the best in an approach where you have other components updating the sidebar visiblity. This use case is for situations when all updates to the sidebar visibility are made from a central store by using a central boolean value.

e.g.

const state = {
  showSidebar: null
}

const mutations: {
  toggleSidebar(state, payload){
     if (payload) { //payload incase you want to force a value and not just toggle
            state.showSidebar = payload;
     } else {
            state.showSidebar = !state.showSidebar;
     }
  }
}

And in your components:

computed: {
   showSidebar(){
     return this.$store.state.showSidebar
   }, //starts off invisible
},
methods: {
   toggleSidebar(){
      this.$store.commit("toggleSidebar");
   }
}

Your updated sidebar component would look like this:

...

And the method:

methods: {
   updateSidebar(value){
      this.$store.commit("toggleSidebar", value);
   }
}

Toggle sidebar from Vue method?

3 Answers