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模型。隐藏模态后，从模态组件内部将当前项重置为null。剩下的就是v型魔术了。

完整示例在这里：

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

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

这几乎就是您在代码中显示的方法。模态组件仅负责显示详细信息。何时显示模式，或何时设置当前所选项目是父母的责任。

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

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

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

Vue.js：如何解决自定义组件中未显示的“ B模式”

1 个答案:

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

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