How do you dynamically create multiple bootstrap cards with Vue

Question

I want to use the bootstrap cards with Vue dynamically. With Bootstrap Vue, to create a card I can do the following.

      <b-card title="Title" img-src="https://placekitten.com/500/350" img-alt="Image" img-top>
        <b-card-text>
          {{getBlogOfType("Vue")}}
        </b-card-text>
        <b-card-text class="small text-muted">Last updated 3 mins ago</b-card-text>
      </b-card>

What I want to be able to do is create the number of cards based on the number of blogs I have from a database. I have my project linked to Firebase and I am able to access the content. I have written a method "getBlogOfType(param)" to get the blog from firebase. As shown above I can call the method multiple times to get the blog I want, but how can I achieve this without manually creating a separate card every time?

Do you have the blog data stored in a variable?

Omari Celestine
– Omari Celestine

2019-06-01 18:28:09 +00:00
Commented Jun 1, 2019 at 18:28 — Omari Celestine
– Omari Celestine, Commented Jun 1, 2019 at 18:28
@Omari Yes I do

Mark
– Mark

2019-06-01 18:30:43 +00:00
Commented Jun 1, 2019 at 18:30 — Mark
– Mark, Commented Jun 1, 2019 at 18:30

Omari Celestine · Accepted Answer · 2019-06-01 18:43:39Z

2

Once you have a variable set aside for the data, for example var posts = [...];, you can use VueJs's v-for as follows:

  <b-card v-for="post in posts" title="Title" img-src="https://placekitten.com/500/350" img-alt="Image" img-top>
    <b-card-text>
      {{getBlogOfType("Vue")}}
    </b-card-text>
    <b-card-text class="small text-muted">Last updated 3 mins ago</b-card-text>
  </b-card>

And use access the values of each element via the post object (post.title).

answered Jun 1, 2019 at 18:43

Omari Celestine

1,4351 gold badge14 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How do you dynamically create multiple bootstrap cards with Vue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related