16

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/

2 Answers 2

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

7
  • 2
    Will this works also if the component are in different files? Commented Jul 10, 2018 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: vuejs.org/v2/guide/components-props.html
    – enbermudas
    Commented Jul 10, 2018 at 18:56
  • 2
    What is user="'item'"
    – Rpant
    Commented Oct 17, 2019 at 19:56
  • 1
    Thanx dude! Saved my day! =) Commented Apr 9, 2020 at 13:30
  • 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
    Commented Jun 10, 2021 at 18:33
3

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')
  },
}
1
  • 12
    This is overkill for such a simple task.
    – unlimittt
    Commented Nov 22, 2020 at 14:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.