CODEWITHSUNDEEP
vue.jsmodal-dialogvue-component
Anže Mur
Anže Mur

Reputation: 1545

Vue.js modal: How can I get response from modal?

I am using Vue.js modal package and I don't know how can I get response data out of my modal window. I created a component for my modal window. Component usage looks like this:

<MyModal :data="data"
         @closed="modalClosed"/>

And I want to get data from the closed event. I open my modal with:

this.$modal.show('my-modal')

And close it with:

<button type="button" @click="$modal.hide('my-modal', {success: true})" class="delete mr-3" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

My modal is defined in MyModal component (I left out the html and script code):

<template>
  <modal
      name="my-modal"
      transition="nice-modal-fade"
      :delay="100"
      :width="'100%'"
      :height="'auto'"
      :classes="['v--modal', 'col-xl-6', 'col-lg-6', 'col-md-8', 'col-sm-12', 'col-xs-12', 'offset-md-2', 'offset-lg-3', 'offset-xl-3']"
      :scrollable="true"
      :adaptive="true"
      :maxHeight="100">
  </modal>
</template>

The @closed hook works inside the modal but not outside where I need it. I don't have any experience in Vue.js, and this is my first attempt at modal windows, so I don't really know what am I missing here, and the documentation is really bad.

Upvotes: 1

Views: 9149

Answers (5)

Zenute Marins
Zenute Marins

Reputation: 1

If someone is looking for a solution, I coded as below:

In the view that calls the modal:

Define the modal components and the event that will be raised: 

    <template>
    ...
      <grupo-alteracao @fechado="grupoAlteracaoFechado"/>
      <grupo-novo @fechado="grupoNovoFechado"/>
    </template>

    <script>
    ...
    import GrupoAlteracao from '@/views/GrupoAlteracao.vue'
    import GrupoNovo from '@/views/GrupoNovo.vue'


    export default {
      name: 'grupo',
      components:{
      GrupoAlteracao,
      GrupoNovo,  
     },
   ...

     methods: {
       novo: function(){
         this.$modal.show('grupo-novo');
       },
       alterar: function(){
         this.$modal.show('grupo-alteracao',this.selecionado);
       },
       grupoAlteracaoFechado(event){
         this.pesquisarGrupos();
      },
      grupoNovoFechado(event){
        this.pesquisarGrupos();
      },
     }

In the modal raise the event (fechado):

    <template>
    <modal name="grupo-alteracao"
         :width=largura
         :height="268"
         :clickToClose="false"
         @before-open="beforeOpen"
         @before-close="beforeClose" 
         style="z-index: 49">
     ...
    </modal>
    </template>
    ...
    ...
    methods: {
    beforeOpen (event) {
       this.grupo = event.params;
    },
    beforeClose (event) {
      this.$emit("fechado");
    },

I hope this helps.

Upvotes: 0

caseyjoneal
caseyjoneal

Reputation: 188

If you want it to work outside of your modal component you could chain an event.

<button @click="show">show modal</button>
<modal
  name="my-modal"
  @closed="closedEvent"
>
  modal content
</modal>

Then down in your methods obj you can emit another event from your @closed event

methods: {
  closedEvent() {
    this.$emit('chainClosedEvent', this.componentDataGoesHere)
  } 
}

Check out this fiddle https://jsfiddle.net/caseyjoneal/sm6gu1je/299/

If you end up needing your modal data throughout your app you should look at vuex

Upvotes: 3

caseyjoneal
caseyjoneal

Reputation: 188

I just tried out this package locally. The @closed hook does work as designed. The markup I used is below

<button @click="show">show modal</button>
<modal
  name="my-modal"
  @closed="closedEvent"
>
  modal content
</modal>

You definitely need a name attribute on the modal component. It does not appear that you have that.

Upvotes: 0

S00V
S00V

Reputation: 21

Have you tried using "before-close" event handler instead of "close"?

As I've understood this component, on "close" event it doesn't $emit any data from component, and because of that, you can't get it in parent-component.

Upvotes: 0

jonnycraze
jonnycraze

Reputation: 498

Check out the events section: there is a closed event you can hook into.

https://www.npmjs.com/package/vue-js-modal#events

Upvotes: 0

Related Questions