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上看到。

在Bootstrap + Vue中，如何在v-b-modal内部使用data属性的值？

1 个答案: