In Bootstrap + Vue, how to use value of data property inside v-b-modal?

Question

Below code only works when "'test'" is inside a double and single quote like this: v-b-modal="'test'"

Sample working code:

<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>

But, what if I want to use a value of a data property, like below example. If I use :v-b-modal="'name'", it uses "name" instead of "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>

Any help is appreciated on how to use a value of a data property inside v-b-modal.

Answer 1

You just have to remove the two dots v-b-modal="name" and it is going to work. You can see on this codepen.