[Vuejs]-Action after modal close in Vue

by

1👍

✅

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.

👤MartinT

Leave a comment