如何使用 Vue 动态创建多个引导卡答案

【问题标题】：How do you dynamically create multiple bootstrap cards with Vue如何使用 Vue 动态创建多个引导卡
【发布时间】：2019-10-17 22:36:17
【问题描述】：

我想在 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 获取博客。如上所示，我可以多次调用该方法来获取我想要的博客，但是如何在不每次都手动创建单独的卡片的情况下实现呢？

【问题讨论】：

您是否将博客数据存储在变量中？
@Omari 是的，我愿意

标签： vue.js bootstrap-4

【解决方案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）访问每个元素的值。

【讨论】：