Bootstrap-Vue：如何将数据传递给模态？

Question

我正在尝试使用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>

这是我的小提琴https://jsfiddle.net/bptLavov/259/

Answer 1

这很好用：

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）该方法将selectedUser根据选定的用户设置数据内部的变量，该信息将根据v-on:click (@click)指令而定，该信息取决于v-for迭代。因此，每个按钮都会发送正确的信息。

3）在模态内显示信息