Software Used: Vue.js Bootstrap-Vue ()
Issue: My aim is to show a popup when a row is clicked within a bootstrap grid. Once the modal is closed, I want it to disappear and the selected item to be removed.
To tackle this problem, I have developed a custom component for the Modal. Now, I am attempting to programmatically eliminate the selected certificate in a smoother manner.
Although I have managed to make it work, the current implementation feels clumsy. I am seeking a more seamless approach from someone with greater Vue expertise than mine.
/// Modal component
<b-modal
size="lg"
id="certificate-details-modal"
hide-footer
header-bg-variant="dark"
header-text-variant="light"
@hidden="modalDismissed"
v-model="expiringCertificate"
>
<template slot="modal-title">
Certificate Details for <span class="certificateTitleHighlight">{{ expiringCertificate.commonName }}</span>
</template>
<b-container fluid>
<b-row>
<b-col>
<b-badge pill variant="dark">Identified</b-badge>
</b-col>
<b-col class="text-center">
<b-badge pill variant="info">Ready</b-badge>
</b-col>
<b-col class="text-right">
<b-badge pill variant="success">Resolved</b-badge>
</b-col>
</b-row>
...
/// Main Component
<ExpiringCertificateDetail
v-if="selectedCertificate"
v-on:modalDismissed="resetSelectedCertificate"
:expiringCertificate="selectedCertificate">
</ExpiringCertificateDetail>
...
data () {
...
selectedCertificate = undefined
},
methods: {
resetSelectedCertificate() {
this.selectedCertificate = undefined;
},
rowSelected(certificate) {
this.selectedCertificate = certificate[0];
this.$bvmodal.show('certificate-details-modal')
},
The objective is to display a modal whenever a row is clicked, with the ability to reset the selectedCertificate back to undefined once the modal is hidden or closed (triggering the hidden event).