Действие после модального закрытия в Vue

Question

Я хочу иметь собственное всплывающее сообщение для подтверждения операции удаления. Я уже пишу это, но у меня есть проблема с тем, как подключить его к моему приложению. Я нажимаю кнопку «Х» рядом с записью, затем появляется модальное окно, в котором я подтверждаю, что я уверен, что делаю, и после этого запись удаляется. Как я могу заставить мою функцию ждать информацию от модального

Answer 1

Вам необходимо использовать связь между родителями и детьми через пользовательские события:

// Main component
<template>
  <div>
    <your-modal-component @accept="deleteEntity"></your-modal-component>
  </div>
</template>

<script>
export default {
  methods: {
    deleteEntity() {
      // your delete functionality
    },
  },
};
</script>

// modal component
<template>
  <div>
    your modal code here
    <button @click="$emit('accept')">Accept</button>
  </div>
</template>

Когда пользователи нажимают на удаление btn, вы сначала должны показать свой модал. После этого вы просто отправляете событие в случае принятия. В вашем основном компоненте вы слушаете это событие и впоследствии запускаете функцию удаления.

Для получения дополнительной информации о связи между родителями и детьми в Vue см. документы .