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/

score 25 · Accepted Answer · edited Feb 20 '20 at 11:48

25

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

edited Feb 20 '20 at 11:48

Thor

498
1
6
15

answered Jul 10 '18 at 18:08

enbermudas

1,603
4
20
42

2

Will this works also if the component are in different files? – Francesco Tropicalista Jul 10 '18 at 18:28
2

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: https://vuejs.org/v2/guide/components-props.html – enbermudas Jul 10 '18 at 18:56
2

What is user="'item'" – Rpant Oct 17 '19 at 19:56
1

Thanx dude! Saved my day! =) – Javid Ahadov Apr 09 '20 at 13:30
1

@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. – enbermudas Dec 10 '20 at 14:05
2

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. – Michel K Jun 10 '21 at 18:33
does not work on mobile devices... – Dejan Apr 05 '23 at 20:35

score 2 · Answer 2 · answered May 28 '20 at 20:34

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

This is overkill for such a simple task. – unlimittt Nov 22 '20 at 14:32 — unlimittt, Nov 22 '20 at 14:32

Bootstrap-vue: how to pass data to modal?

2 Answers2

Linked