I am currently utilizing Vue in my project and I have a component that displays a button. When this button is clicked, it triggers a modal to open which is also part of the same component. The functionality works as intended.
However, if there are multiple instances of this button on the page, the modal opens multiple times due to the nature of the implementation. While I understand the reasoning behind this behavior, it is not the desired outcome for my application.
Below you can find the code snippet:
<template>
<div>
<button @click="$bvModal.show('edit-profile-modal')" class="btn btn-sm btn-secondary mt-3">Edit</button>
<b-modal id="edit-profile-modal" ref="editProfileModal" :ok-only="true">
<template #modal-title>
Edit your profile
</template>
<div class="d-block text-center">
</div>
</b-modal>
</div>
</template>
<script>
export default {
props: {
},
data() {
return {};
},
mounted() {
},
computed: {
},
methods: {
}
}
</script>
I am looking for a way to make the modal unique so that it does not get duplicated when multiple buttons are clicked. The content of the modal will always remain consistent regardless of which button triggers it.
While similar questions on StackOverflow discuss tables with 'Edit' buttons spawning modals containing form elements, my scenario involves a static modal with unchanging content. I aim to create a reusable component that users can interact with to open this specific modal without duplicating its presence.
Thank you.