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?
Advertisement
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')
<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/bootstrap@4.5.2/dist/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://unpkg.com/bootstrap-vue@2.17.1/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/bootstrap-vue@2.17.1/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/bootstrap@4.5.2/dist/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://unpkg.com/bootstrap-vue@2.17.1/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/bootstrap-vue@2.17.1/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>