Vue.js модальный: Как я могу получить ответ от модального?

Question

Я использую Vue.js модальный пакет , и я не знаю, как я могу получить данные ответа из моего модального окна.Я создал компонент для моего модального окна.Использование компонента выглядит следующим образом:

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

И я хочу получить данные из закрытого события.Я открываю мой модал с помощью:

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

И закрываю его с помощью:

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

Мой модал определен в компоненте MyModal (я пропустил HTML и код скрипта):

<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>

Крюк @closed работает внутри модала, а не снаружи там, где он мне нужен.У меня нет опыта работы с Vue.js, и это моя первая попытка модальных окон, поэтому я не знаю, чего мне здесь не хватает, и документация действительно плохая.

Answer 1

Если вы хотите, чтобы он работал за пределами вашего модального компонента, вы можете связать событие в цепочку.

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

Затем в ваших методах obj вы можете отправить другое событие из вашего @closed события

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

Проверьте эту скрипку https://jsfiddle.net/caseyjoneal/sm6gu1je/299/

Если вам в конечном итоге понадобятся ваши модальные данные в вашем приложении, вы должны взглянуть на vuex

Answer 2

Вы пытались использовать обработчик события «before-close» вместо «close»?

Как я понял этот компонент, при событии «close» он не $ $ отправляет данные из компонента,и из-за этого вы не можете получить его в родительском компоненте.

Answer 3

Я только что опробовал этот пакет локально.Крюк @closed работает как задумано.Разметка, которую я использовал, ниже

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

Вам обязательно нужен атрибут name в модальном компоненте.Похоже, что у вас есть это.

Answer 4

Ознакомьтесь с разделом событий: есть закрытое событие, к которому вы можете подключиться.

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