Как отправить модальный результат в родительский компонент - PullRequest
Новая
       33

Как отправить модальный результат в родительский компонент

0 голосов
/ 05 марта 2020

Я использую vuejs с bootstrap - vue. У меня есть два компонента. Список объектов и мой модал. Я открываю мой мод, когда нажимаю на определенную кнопку. Обычно мой модал спрашивает: «Вы уверены, что хотите удалить эти записи?» например.

Все работает нормально, но я не знаю, как получить результат модального в моем родительском компоненте (если я нажал 'ok' или 'cancel', ...).

Как мне это сделать?

Так как мой модал открывается следующим образом:

В моем родительском компоненте (списке): 

deleteSelectedGroups () {
  const modalOptions = {
    action: 'delete',
    records: this.selectedGroups,
    recordFields: ['name', 'usersCount'],
    okTitle: 'Delete',
    okVariant: 'danger'
  }
  this.showModalConfirmation(modalOptions)
  // ...
  // if result of modal is true then ...
},

showModalConfirmation (modalOptions) {
  this.$refs.ModalConfirmation.show(modalOptions)
}

В моем модальном компоненте: 

show (modalOptions) {
  for (let option in modalOptions) {
    this[option] = modalOptions[option]
  }
  this.$bvModal.show('modalConfirmation')
}

Должен ли я сделать это просто, возвращая значение с помощью моих методов?

Или я должен сделать vuejs перевести и передать переменную родителю?

РЕДАКТИРОВАТЬ: Как я хотел бы, чтобы мой поток был (псевдокод): 

deleteselectedGroups () {
  openModal()
  modalAnswer = modal.getAnswer()
  if (modalAnswer === 'OK') {
    deleteMyRecords() 
  }
}

Ответы [ 2 ]

3 голосов
/ 05 марта 2020

Итак, я сделал 3 разных способа сделать это.

Используя встроенное обещание MsgConfirmBox https://codesandbox.io/s/modal-send-answer-to-parent-3vbiv

Этот метод использует уже встроенный Confirm MessageBox , который возвращает обещание, которое возвращает, была ли нажата кнопка OK или нет, после разрешения.

Передача от дочернего элемента к родительскому: https://codesandbox.io/s/modal-send-answer-to-parent-3olms

Этот метод $emit является настраиваемым событием для родителя, которое затем можно использовать для запуска нужного метода. Он также может передавать данные родительскому элементу, например, заданный элемент c, который нужно удалить, как в codesandbox.

Реализация собственного обещания: https://codesandbox.io/s/modal-send-answer-to-parent-py3nm

Это реализует обещание в нашем пользовательском модальном компоненте, чтобы получить поведение, подобное MsgConfirmBox, которое Bootstrap - Vue имеет. Лично я считаю, что этот метод немного «схематичен», поскольку вам придется больше обрабатывать ошибки для различных сценариев ios, чтобы правильно разрешить / отклонить обещание.

1 голос
/ 05 марта 2020

Хорошо создать отдельный компонент для модального режима и создать оттуда событие в соответствии с руководством vuejs. Таким образом, ваш код будет выглядеть чисто, и вы получите свою ценность.

...