Vue.js：如何修复自定义组件中未显示的'B-modal'

Question

Tools: Vue.js Bootstrap-Vue ( https://bootstrap-vue.js.org/docs/components/modal )

Problem: I am trying to display a popup each time a row is clicked within a bootstrap grid. Then once the modal is hidden it disappears and the selected item goes away

I created a custom component for the Modal. And I am now trying to programmatically get rid of the selected certificate.

I have it working, but barely and it's very clunky. I want a more seamless approach on how someone would tackle this problem who has more Vue experience than I do

/// 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')
        },

My goal would be to display a modal each time a row is clicked and have the selectedCertificate reset back to undefined once the modal is hidden (either closed or unfocused and closed (which should be the hidden event)

Answer 1

I have been thinking of two possible approaches. Each of them use a separate component for the modal.

1. Use v-model for the current selected item

Use the modal component as any other input: declare a v-model on the component. When the modal is hidden, reset the current item to null from inside the modal component. The v-model magic will do the rest.

Full example here:

https://codesandbox.io/s/bootstrap-vue-sandbox-w8j09

2. Reset the current selected item from outside the modal component

This is pretty much the approach you have shown in your code. The modal component is only responsible for displaying the details. When to show the modal, or when to set the current selected item is the parent's responsibility.

In this example, I used a similar implementation as yours. I just use v-model on the modal component to avoid the this.$bvmodal.show and make the code more 'declarative'.

https://codesandbox.io/s/bootstrap-vue-sandbox-rwll4

Both approaches make them possible to change the details component into something other than a modal. Although the first approach is less verbose, I would go for the second approach because is leaves the responsibility of showing/hiding the details from outside.