Vue.js：如何修复“b-modal”未显示在自定义组件中

Question

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

问题： 每次在引导网格中单击一行时，我都会尝试显示一个弹出窗口。然后，一旦模态框被隐藏，它就会消失并且所选项目消失

我为 Modal 创建了一个自定义组件。我现在正试图以编程方式摆脱选定的证书。

我有它的工作，但几乎没有，而且非常笨重。我想要一种更无缝的方法来解决比我有更多 Vue 经验的人如何解决这个问题

/// 模态组件

        <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>
   ...

/// 主要组件

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

我的目标是在每次单击一行时显示一个模态，并在模态隐藏后将 selectedCertificate 重置为未定义（关闭或未聚焦并关闭（这应该是隐藏事件）

Answer 1

我一直在考虑两种可能的方法。他们每个人都为模态使用一个单独的组件。

1。对当前选中项使用 v-model

将模态组件用作任何其他输入：在组件上声明一个 v-model。隐藏模式时，从模式组件内部将当前项目重置为空。 v-model 的魔法将完成剩下的工作。

此处为完整示例：

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

2。从模态组件外部重置当前选定项

这几乎就是您在代码中展示的方法。 modal 组件只负责显示细节。什么时候显示模态，或者什么时候设置当前选中项是父级的职责。

在此示例中，我使用了与您的类似的实现。我只是在模态组件上使用v-model 来避免this.$bvmodal.show 并使代码更具“声明性”。

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

这两种方法都可以将详细信息组件更改为模态以外的其他内容。 虽然第一种方法不那么冗长，但我会选择第二种方法，因为它留下了从外部显示/隐藏细节的责任。