Vue-js-modal: How to pass data from modal to Parent component

[heykkyu]

Problem:

This is Parent component
corpSearch (name) { this.$modal.show(ModalCorpSearch, { title: 'This is Title', text: name }, { width: 700, height: 'auto' } ); }, setCorpSearch (item) { this.member.memberCorpName = item.name; },

This is called Modal
set (item) { this.$parent.setCorpSearch(item2); this.$emit('close'); }

is there any solution how to pass data to parent component's function

...

Example & screenshots:

...

I have checked stackoverflow for solutions and 100% sure that issue not in my code.

[euvl]

Check How to use section in readme

You can easily send data into the modal:

this.$modal.show('hello-world', { foo: 'bar' })
And receive it in beforeOpen event handler:

<modal name="hello-world" @before-open="beforeOpen"/>
methods: {
  beforeOpen (event) {
    console.log(event.params.foo);
  }
}

[rangermeier]

Had a similar issue, as far as I understood there is no documented way to send data from your modal to your parent component but you can do something like this:
Define a listener for a custom event in your parent component when opening the modal:

corpSearch (name) { 
  this.$modal.show(ModalCorpSearch,
    { title: 'This is Title', text: name },
    { width: 700, height: 'auto' },
    {
      'corp-search': (item) => this.member.memberCorpName = item.name;
    }
 );

Then emit a custom event from your modal by proxying to its parent (i.e. the vue-js-modal component) so your parent component can receive it: this.$parent.$emit('corp-search', item)

Hope this helps.

[GeorgeFlorian]

@rangermeier Can you please expand the code into a full example ? I am trying to send data from modal to parent element but I don't understand how. What I have found until now are bits and pieces of code that I do not know where to put or how to use.

[rangermeier]

@GeorgeFlorian

The parent component (Parent.vue) looks something like this:

<template>
  <div id="app">
    <h1>The modal says: {{ message }}</h1>

    <button @click="openModal">Open Modal</button>
  </div>
</template>

<script>
import Modal from './Modal.vue'

export default {
  data() {
    return {
      message: ""
    }
  },
  methods: {
    openModal() {
      this.$modal.show(
        Modal,
        { title: "This is passed from the parent to the modal" },
        { width: 700, height: "auto" },
        {
          "modal-change": (val) => (this.message = val)
        }
      )
    }
  }
}
</script>

And the modal component (imported as Modal.vue in the parent component):

<template>
<div>
    <h1>{{title }}</h1>
    the value of the input is emitted from the modal to the parent: <input v-model="modalValue" />
</div>
</template>

<script>
export default {
    props: {
        title: String,
    },
    data() {
        return { modalValue: "" }
    },
    watch: {
        modalValue(val) {
            this.$parent.$emit("modal-change", val)
        }
    }
}
</script>

The trick is, that $emit notifies only the direct parent of the emitting component. In case of Modal.vue the direct parent is not Parent.vue but some wrapper injected by vue-js-modal:

Parent.vue > vue-js-modal > Modal.vue             

Thus you have to access the parent (this.$parent) of Modal.vue and emit from it (this.$parent.$emit('modal-change', val)) so Parent.vue can receive the event.

This way you can emit custom events which you can handle in your parent component just like those events described in the docs.