javascript - Vue - Bind data to bootstrap-vue card attributes

Question

Backend developer new to frontend. I'm trying to work with Vue and Bootstrap Vue.

I have bootstrap card attributes (i.e title) I am currently trying to dynamically populate the values for. I have the data ready available on the JS side. I have tried moustache syntax which does not work, as well as different attempts at v-binding. Any pointers are appreciated

        <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">
        <b-card-text>
          Blah blah
        </b-card-text>
        <b-button href="#" variant="primary">Go somewhere</b-button>
      </b-card>

Answer 1

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