Bootstrap-Vue:如何将数据传递给模态? [英] Bootstrap-vue: how to pass data to modal?

问题描述

我正在尝试使用bootstrap-vue模态来显示项目集合中的详细信息.

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>

然后以模式显示名称:

<b-modal id="myModal" :user="'user'">
  Hello {{user}}!
</b-modal>

这是我的小提琴 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:

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

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)在模式内部显示信息

3) Display the information inside the modal

这篇关于Bootstrap-Vue:如何将数据传递给模态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！