vue.js - 如何使用 Vue.js 动态填充引导网格

Question

到目前为止，我已经从我的数据库中获取了一个对象列表（每个对象都包含一个名称和描述），并希望在引导网格中显示这些对象，以便每个对象都有自己的部分，并显示其名称和描述。因此，例如，如果列表中有 5 个项目，并且我希望每行 3 个项目，那么它将如下所示：

并且网格将响应屏幕尺寸。我对 Vue 不是很熟悉，如果不对网格进行硬编码，我看不到如何做到这一点。

这是我的代码目前的样子：

<template>
  <div class="app">
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'app2',
  data() {
    return {
      items: []
    }
  },
// Fetch items from database...
}

标签： vue.jsbootstrap-4

Answer 1

使用 v-for 和 bootstrap 样式：

<template>
  <div class="app">

    <div class="row">
      <div class="col-sm" v-for="item in items">
        {{ item.prop1 }}
      </div>
    </div>

  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'app2',
  data() {
    return {
      items: []
    }
  },
// Fetch items from database...
}