Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap-vue: how to pass data to modal?

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/

like image 492
Francesco Tropicalista Avatar asked Jul 10 '18 17:07

Francesco Tropicalista


People also ask

How do I transfer data from components to Vue?

VueJS props are the simplest way to share data between components. Props are custom attributes that we can give to a component. Then, in our template, we can give those attributes values and — BAM — we're passing data from a parent to a child component!

How do I make modal close on click outside Vue?

Close Dialog while Click on Outside of Dialog in Vue Dialog component. By default, dialog can be closed by pressing Esc key and clicking the close icon on the right of dialog header. It can also be closed by clicking outside of the dialog using hide method.


2 Answers

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

like image 184
enbermudas Avatar answered Oct 08 '22 07:10

enbermudas


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')
  },
}
like image 24
Uygar Avatar answered Oct 08 '22 07:10

Uygar