v-for render or don't render <div> on {x} iteration

Question

我没有在任何地方找到我的问题的解决方案，我无法弄清楚。我有 div 个这样的

<div class="columns">
  <div class="column">
   {looping content here}
  </div>
</div

数据是这样的：

{
   title: 'blabla'
   body: 'blabla'
   msg: 'blabla"
}

出于响应目的，我最多需要并排放置 3 列，然后启动另一个列容器，该容器将在下方堆叠列。因此，列容器内有 3 列 div，然后创建另一个列 div，其中包含 3 列 div，直到数组为空。

我已经尝试计算计数属性但不知道如何在 v-for 中迭代它。也试过 v-if 但它没有按计划工作:(

在 v-for 中甚至可能吗？老实说，我不知道该采取什么方法。

Answer 1

如果数据格式正确，可以嵌套 v-for 循环。
例如，对象数组（对于第一个v-for）（对于第二个循环）：

new Vue({
  el: "#app",
  data() {
    return {
      items: [
        {
          title: 'Title 1',
          body: 'body 1',
          msg: 'message 1'
        },
        {
          title: 'Title 2',
          body: 'body 2',
          msg: 'message 2'
        }
      ]
    }
  }
})

.columns {
  align-items: center;
  display: flex;
  height: 40px;
  justify-content: space-around;
  width: 50%;
}

<script src="https://unpkg.com/vue@2.6.8/dist/vue.min.js"></script>
<div id="app">
  <div class="columns" v-for="item in items">
    <div class="column" v-for="(value, key) in item">
      <div>{{ value }}</div>
    </div>
  </div>
</div>

Answer 2

为什么不直接将每一列插入一个列容器中，然后使用 CSS 每 3 列换行到一个新行。这样做的额外好处是您可以使用媒体查询调整每行中显示的列数。

在全屏模式下尝试运行下面的代码片段，并将浏览器的大小调整到小于 576 像素宽以查看响应列。

new Vue({
  el: '#app',
  data () {
    return {
      columns: [
        {
          title: 'blabla',
          body: 'blabla',
          msg: 'blabla'
        },
        {
          title: 'blabla',
          body: 'blabla',
          msg: 'blabla'
        },
        {
          title: 'blabla',
          body: 'blabla',
          msg: 'blabla'
        },
        {
          title: 'blabla',
          body: 'blabla',
          msg: 'blabla'
        },
        {
          title: 'blabla',
          body: 'blabla',
          msg: 'blabla'
        }
      ]
    }
  }
})

.columns {
  display: flex;
  flex-wrap: wrap;
}

.column {
  box-sizing: border-box;
  padding: 1em;
  width: 33.3%;
}

/* on devices smaller than 576px, stack columns */
@media (max-width: 576px) {
  .column {
    width: 100%;
  }
}

<script src="https://unpkg.com/vue@2.6.8/dist/vue.min.js"></script>
<div id="app">
  <div class="columns">
    <div v-for="(column, index) in columns" class="column" :key="index">
      <h2>{{ column.title }}</h2>
      <p>{{ column.body }}</p>
      <strong>{{ column.msg }}</strong>
    </div>
  </div>
</div>

v-for render or don't render <div> on {x} iteration

v-for render or dont render <div> on {x} iteration

loops

render

vue.js

v-for