Bootstrap-vue：如何将数据传递给模态？答案

【问题标题】：Bootstrap-vue: how to pass data to modal?Bootstrap-vue：如何将数据传递给模态？
【发布时间】：2023-03-30 21:39:01
【问题描述】：

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

我想要的是将数据传递给 modal 以显示一条简单的消息。

我首先遍历记录集以显示按钮。

<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/

【问题讨论】：

标签： vue.js bootstrap-vue

【解决方案1】：

您可以使用 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>

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')
  },
}

【讨论】：

对于这么简单的任务来说，这太过分了。

【解决方案2】：

这很好用：

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) 显示模态框内的信息

【讨论】：

如果组件位于不同的文件中，这是否也有效？
您是指一个文件中的ul 和另一个文件中的modal 吗？不会，但您可以使用props。看看这个：vuejs.org/v2/guide/components-props.html
什么是 user="'item'"
谢谢老兄！拯救了我的一天！ =)
@Rpant 我正试图弄清楚。很久没有使用 Vue 了。就我所见，它没有用，但我不能肯定地告诉你。