Toggle sidebar from Vue method?

Question

In a <b-table> I would like to create an action on each items so I have a button:

<b-table :items="data" :fields="fields">
  <template v-slot:cell(actions)="data">
    <b-button v-on:click="doIt(data.index)">Do It</b-button>
  </template>
</b-table>

Then I have a Form in a sidebar

<b-sidebar id="do-it-form" title="Do it" right>
...
</b-sidebar>

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

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

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?

Answer 1

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')

<b-collapse> and <b-sidebar> 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')
    }
  }
})

<link href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.js"></script>

<div id="app">
  <b-sidebar id="my-sidebar" right>
    My sidebar
  </b-sidebar>

  <b-btn @click="openSidebar">
    Open sidebar
  </b-btn>
</div>

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
    }
  }
})

<link href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.js"></script>

<div id="app">
  <b-sidebar v-model="isSidebarOpen" right>
    My sidebar
  </b-sidebar>

  <b-btn @click="openSidebar">
    Open sidebar
  </b-btn>
</div>

Answer 2

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

<b-sidebar ref="mySidebar" id="do-it-form">
...
</b-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();