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/
VueJS props are the simplest way to share data between components. Props are custom attributes that we can give to a component. Then, in our template, we can give those attributes values and — BAM — we're passing data from a parent to a child component!
Close Dialog while Click on Outside of Dialog in Vue Dialog component. By default, dialog can be closed by pressing Esc key and clicking the close icon on the right of dialog header. It can also be closed by clicking outside of the dialog using hide method.
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
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')
},
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With