Vue.js: How to fix 'b-modal' not displaying within custom component

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)

Multicolaure · Accepted Answer · 2019-07-20 14:40:05Z

4

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.

edited Jul 20, 2019 at 14:40

answered Jul 20, 2019 at 13:17

Multicolaure

1,07811 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

William Zink Over a year ago

Still working through your examples. The first change I made was import ItemDetails from "./components/Modale"; to import ItemDetails from "@/components/ItemDetails"; this seems to bring up the grid now but I'm still getting a few errors. Headed out and about today but I'll take a look when I get back. I really appreciate the help so far!!

Multicolaure Over a year ago

I fixed the links, I messed up with codesandbox somehow.

Multicolaure Over a year ago

Simplicity I guess. It depends on how you expect your code might evolve in the future.

Collectives™ on Stack Overflow

Vue.js: How to fix 'b-modal' not displaying within custom component

1 Answer 1

1. Use v-model for the current selected item

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

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1. Use v-model for the current selected item

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

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related