Bootstrap-vue: ¿cómo pasar datos a modal?

Solución:

Esto funciona bien:

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;
    }
  }

})

Lo que hace es:

1) Ejecute un método llamado sendInfo

2) Que los métodos establecerán el selectedUser variable dentro de los datos con el usuario seleccionado cuya información se envía gracias al v-on:click (@click) directiva en función de la v-for iteración. Por eso, cada botón enviará la información correcta.

3) Mostrar la información dentro del modal

Puede usar vuex y sus componentes no tendrán que estar en el mismo archivo o estar relacionados.

Componente que abrirá el 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>

Plantilla de modal:

<b-modal id="myModal">
  Hello {{selectedUser.first_name}} {{selectedUser.last_name}} !
</b-modal>

Propiedad calculada de modal:

selectedUser() { return this.$store.state.modals.modalData },

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

---

---

Utiliza Nuestro Buscador