Как вы динамически создаете несколько загрузочных карт с помощью Vue?

Question

Я хочу использовать загрузочные карты с Vue динамически. С помощью Bootstrap Vue для создания карты я могу сделать следующее.

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

То, что я хочу сделать, - это создать количество карточек на основе количества блогов, которые у меня есть, из базы данных. У меня есть проект, связанный с Firebase, и я могу получить доступ к содержимому. Я написал метод "getBlogOfType (param)", чтобы получить блог из firebase. Как показано выше, я могу вызывать метод несколько раз, чтобы получить нужный блог, но как я могу добиться этого, не создавая вручную отдельную карту каждый раз?

Answer 1

Если у вас есть переменная, выделенная для данных, например, var posts = [...];, вы можете использовать VueJs v-for следующим образом:

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

И использовать доступ к значениям каждого элемента через post объект (post.title).