javascript - Vue.js:如何修复 'b-modal' 未在自定义组件中显示

Question

工具: Vue.js Bootstrap-Vue (https://bootstrap-vue.js.org/docs/components/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。当模态框隐藏时，从模态组件内部将当前项重置为 null。 v-model 魔法将完成剩下的工作。

完整示例在这里:

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

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

这几乎就是您在代码中展示的方法。模态组件只负责显示细节。何时显示模式，或何时设置当前选定的项目是父级的责任。

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

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

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