在Bootstrap + Vue中，如何在v-b-modal中使用数据属性的值？

Question

以下代码仅在“'test'”位于双引号和单引号内时有效，如下所示：v-b-modal="'test'"

示例工作代码：

<div id="app">
    <div>
        <b-link v-b-modal="'test'">Click to Test Modal</b-link>
    </div>
    <b-modal id="test" title="Bootstrap Vue Modal 2">
        <p class="my-4">Testing Bootstrap Vue Modal Without</p>
    </b-modal>
</div>

但是，如果我想使用数据 属性 的值怎么办，如下例所示。如果我使用 :v-b-modal="'name'"，它使用 "name" 而不是 "testModal"。

<div id="app">
    <div>
        <b-link :v-b-modal="name">Click to Test Modal</b-link>
    </div>
    <b-modal :id="name" title="Bootstrap Vue Modal">
        <p class="my-4">Testing Bootstrap Vue Modal</p>
    </b-modal>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            name: 'testModal'
        }
    })
</script>

感谢任何有关如何在 v-b-modal 中使用数据 属性 值的帮助。

Answer 1

您只需删除两个点 v-b-modal="name" 即可。 你可以在这个codepen.

上看到