Bootstrap-Vue Modal 每次都会重新打开，除了 ESC答案

【问题标题】：Bootstrap-Vue Modal reopens everytime except in ESCBootstrap-Vue Modal 每次都会重新打开，除了 ESC
【发布时间】：2019-04-12 12:53:45
【问题描述】：

我目前正在为一个项目编写一个 Vue 组件。我遇到了一个问题，Bootstrap-Vue 模态将再次打开而不是关闭。我在版本 2.6.10 和 Bootstrap 4 中使用 Vue.js。

<template>
    <div>
        <b-button v-b-modal.rating-modal @click="showModal()">
            Click me
            <b-modal ref="rating-modal" no-close-on-backdrop centered title="Rate" class="rating-modal" @ok="hideModal" @cancel="hideModal" @close="hideModal">
                <div>
                    Content of the modal...
                </div>
            </b-modal>
        </b-button>
    </div>
</template>

<script>

    export default {
        name: "Rating",
        components: {
            ,
        },
        methods: {
            showModal() {
                this.$refs['rating-modal'].show();
            },
            hideModal() {
                this.$refs['rating-modal'].hide();
            },
        }
    }
    ;
</script>

当我点击取消、确定或标题中的十字时，我希望它会关闭。

【问题讨论】：

你检查过你的方法是否被控制台调用了吗？
是的，我检查过了，但我已经解决了我的问题。还是非常感谢。

标签： javascript vue.js bootstrap-modal

【解决方案1】：

好的，我自己解决了这个问题。我所要做的就是将 b-modal 标签移出 b-button 标签，如下所示：

<template>
    <div>
        <b-button v-b-modal.rating-modal @click="showModal()">
            Click me
        </b-button>
        <b-modal ref="rating-modal" no-close-on-backdrop centered title="Rate" class="rating-modal" @ok="hideModal" @cancel="hideModal" @close="hideModal">
            <div>
                Content of the modal...
            </div>
        </b-modal>
    </div>
</template>

【讨论】：