Bootstrap-vue: how to pass data to modal? - vue.js

Question

I'm trying to use bootstrap-vue modal to show details from a collection of items.
What I want is to pass data to modal to show a simple message.
I first loop over recordset to show button.
<ul>
<li v-for="item in items">{{ item.first_name }}
<b-button size="sm" v-b-modal="'myModal'" user="'item'">
Saluta {{item.first_name}}
</b-button>
</li>
</ul>
And then display name in modal:
<b-modal id="myModal" :user="'user'">
Hello {{user}}!
</b-modal>
Here's my fiddle https://jsfiddle.net/bptLavov/259/

Answer 1

This works just fine:
HTML:
<div id="app">
<ul>
<li v-for="item in items">
{{ item.first_name }}
<b-button size="sm" v-b-modal="'myModal'" user="'item'" click="sendInfo(item)">
Saluta {{item.first_name}}
</b-button>
</li>
</ul>
<b-modal id="myModal">
Hello {{selectedUser.first_name}} {{selectedUser.last_name}} !
</b-modal>
</div>
JAVASCRIPT:
new Vue({
el: '#app',
data: {
items :
[
{ first_name: 'Dickerson', last_name: 'Macdonald' },
{ first_name: 'Larsen', last_name: 'Shaw' },
{ first_name: 'Geneva', last_name: 'Wilson' },
{ first_name: 'Jami', last_name: 'Carney' }
],
selectedUser: '',
},
methods: {
sendInfo(item) {
this.selectedUser = item;
}
}
})
What it does is:
1) Execute a method named sendInfo
2) That methods will set the selectedUser variable inside data with the selected user which information is sent thanks to the v-on:click (#click) directive depending on the v-for iteration. Because of that, each button will send the right information.
3) Display the information inside the modal

Answer 2

You can use vuex and your components won't have to be in the same file or related.
Component which will open the modal:
<ul>
<li v-for="item in items">{{ item.first_name }}
<b-button #click="$store.dispatch('modals/openModal', { data: item, modalId: 'myModal' })">
Saluta {{item.first_name}}
</b-button>
</li>
</ul>
Modal's template:
<b-modal id="myModal">
Hello {{selectedUser.first_name}} {{selectedUser.last_name}} !
</b-modal>
Modal's computed property:
selectedUser() { return this.$store.state.modals.modalData },
Vuex module (modals.js):
const state = {
modalData: {},
}
const mutations = {
setModalData(state, data) { state.modalData = data },
}
const actions = {
openModal(context, data) {
context.commit('setModalData', data.data)
$('#' + data.modalId).modal('show')
},
}