Bootstrap-vue: how to pass data to modal?

Question

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>

And then display name in modal:

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

Here's my fiddle https://jsfiddle.net/bptLavov/259/

Solution 1

This works just fine:

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

})

What it does is:

1) Execute a method named sendInfo

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) Display the information inside the modal

Solution 2

You can use vuex and your components won't have to be in the same file or related.

Component which will open the 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>

Modal's template:

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

Modal's computed property:

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

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

Comments

[Francesco Tropicalista]

Will this works also if the component are in different files?

[enbermudas]

Do you mean the ul in one file and the modal at another file? It won't, but you could use props. Have a look at this: vuejs.org/v2/guide/components-props.html

[Rpant]

What is user="'item'"

[Javid Ahadov]

Thanx dude! Saved my day! =)

[unlimittt]

This is overkill for such a simple task.

[enbermudas]

@Rpant I'm trying to figure it out. It's been a LONG time without using Vue. For what I can see, it is useless, but I can't tell you for sure.

[Michel K]

Note that this answer requires editing: the click doesn't register without the @ sign. So the answer is currently not 100% correct. But simply change it to @click="sendInfo(item)" and it'll work as expected. At least this is for my version: Vue 3.