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

Question

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

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

我为 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 并使代码更 'declarative'.

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

这两种方法都可以将详细信息组件更改为模式以外的内容。虽然第一种方法不那么冗长，但我会选择第二种方法，因为它让 showing/hiding 从外部获取细节的责任。

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

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

javascript

vue.js

bootstrap-vue

1。使用v-model为当前选中的项目

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