How do you dynamically create multiple bootstrap cards with Vue

2
votes

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?

1
vue.jsbootstrap-4
Do you have the blog data stored in a variable? - Omari Celestine
@Omari Yes I do - Mark Shaio

1 Answers

2
votes

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