Bootstrap-vue:如何将数据传递给模态?
Bootstrap-vue: how to pass data to modal?
我正在尝试使用 bootstrap-vue 模态来显示项目集合的详细信息。
我想要的是将数据传递给模态以显示一条简单的消息。
我首先遍历记录集以显示按钮。
<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>
然后在模式中显示名称:
<b-modal id="myModal" :user="'user'">
Hello {{user}}!
</b-modal>
这是我的 fiddle https://jsfiddle.net/bptLavov/259/
这很好用:
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;
}
}
})
它的作用是:
1) 执行名为sendInfo
的方法
2) 该方法将根据 v-for
迭代,根据 v-on:click (@click)
指令,将所选用户的信息设置为内部数据中的 selectedUser
变量。因此,每个按钮都会发送正确的信息。
3) 显示模态里面的信息
您可以使用 vuex,您的组件不必位于同一文件或相关文件中。
将打开模式的组件:
<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 的模板:
<b-modal id="myModal">
Hello {{selectedUser.first_name}} {{selectedUser.last_name}} !
</b-modal>
模态的计算 属性:
selectedUser() { return this.$store.state.modals.modalData },
Vuex 模块(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')
},
}
我正在尝试使用 bootstrap-vue 模态来显示项目集合的详细信息。
我想要的是将数据传递给模态以显示一条简单的消息。
我首先遍历记录集以显示按钮。
<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>
然后在模式中显示名称:
<b-modal id="myModal" :user="'user'">
Hello {{user}}!
</b-modal>
这是我的 fiddle https://jsfiddle.net/bptLavov/259/
这很好用:
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;
}
}
})
它的作用是:
1) 执行名为sendInfo
2) 该方法将根据 v-for
迭代,根据 v-on:click (@click)
指令,将所选用户的信息设置为内部数据中的 selectedUser
变量。因此,每个按钮都会发送正确的信息。
3) 显示模态里面的信息
您可以使用 vuex,您的组件不必位于同一文件或相关文件中。
将打开模式的组件:
<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 的模板:
<b-modal id="myModal">
Hello {{selectedUser.first_name}} {{selectedUser.last_name}} !
</b-modal>
模态的计算 属性:
selectedUser() { return this.$store.state.modals.modalData },
Vuex 模块(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')
},
}