[Vuejs]-Vue – Bind data to bootstrap-vue card attributes

by

0👍

The mustache syntax can’t be used for HTML attributes, which is detailed here. What you’re looking for is v-bind, which allows you to make attributes reactive.

So to bind title to the value of testTitle you’d do something like this:

<b-card
    v-bind:title="testTitle"
    img-src="https://picsum.photos/600/300/?image=25"
    img-alt="Image"
    img-top
    tag="article"
    style="max-width: 20rem;"
    class="mb-2"
>

Or you could use the shorthand and omit the v-bind like so:

<b-card
    :title="testTitle"
    img-src="https://picsum.photos/600/300/?image=25"
    img-alt="Image"
    img-top
    tag="article"
    style="max-width: 20rem;"
    class="mb-2"
>

Leave a comment