CODEWITHSUNDEEP
vuejs2vue-componentbootstrap-vue
David
David

Reputation: 3821

Bootstrap-Vue <b-card /> With Link In Title

I have a component that contains a <b-card> component like this:

<b-card :title="post.title">
  <p class="card-text">{{ post.body }}</p>
</b-card>

How do I make the card title a clickable link? That is, I can set the text with :title= but there does not exist a parameter to wrap the text in a <a href=""> tag.

Upvotes: 7

Views: 9097

Answers (1)

Quoc-Anh Nguyen
Quoc-Anh Nguyen

Reputation: 5086

You can disable the render of title and sub-title with no-body option. Then, you can implement the body yourself.

<b-card no-body>
  <b-card-body>
    <b-link to="/">
      <h4>{{ post.title }}</h4>
    </b-link>
    <p class="card-text">{{ post.body }}</p>
  </b-card-body>
</b-card>

Upvotes: 19

Related Questions