CODEWITHSUNDEEP
javascriptvue.jsmodal-dialog
Michał Kruk
Michał Kruk

Reputation: 175

Action after modal close in Vue

I want to have custom pop up message to confirm deleting operation. I write it already, but I have a problem about how to connect it to my app. I click the 'X' button next to the record, then the modal pop up I confirm in it that I am sure what I am doing and after that, record is deleted. How I can make my function to wait for information from modal

Upvotes: 0

Views: 2048

Answers (1)

MartinT
MartinT

Reputation: 654

You need to use parent-child communication via custom events:

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

When users clicks on the delete btn, you first have to show your modal. After that, you simply emit event in case of accept. In your main component, you listen to that event and fire your delete function afterwards.

For more info about parent-child communication in Vue see the docs.

Upvotes: 1

Related Questions