V-if inside v-for - display list of items in two columns(v-if在v-用于在两列中显示项目列表)

问题描述

我很抱歉发布了这篇文章，因为我可以看到许多类似于这个问题的问题已经被问了好几次了。以下是那些差点帮助我的人-以及为什么他们没有：

• This一个原因是计算不应该在呈现中完成，而应该在Methods/Computed部分中完成。这对我没什么帮助。
• This一个使用两个不同的模板，在template-tag上写v-if。在我的例子中，这看起来很愚蠢，因为这两个模板98%相同。
• ThisMedium-文章解决了非常接近的一个问题。然而，在他的例子中，它是对用户的过滤(通过计算属性来解决)，而不是在特定迭代中插入代码片段的if子句(这正是我想要找的)。

问题

我有一个从API中提取的项目列表，因此数量将会更改。我希望它们按如下方式显示在两列中：

-----------------
| Item1   Item5 |
| Item2   Item6 |
| Item3   Item7 |
| Item4         |
-----------------

我正在使用v-for循环遍历它们。

我的尝试

1. 将纯CSS用于display: flex

但这只能做到这一点：

-----------------
| Item1   Item2 |
| Item3   Item4 |
| Item5   Item6 |
| Item7         |
-----------------

2. 将CSS用于column-count: 2;

3. 于是我放弃了使用CSS修复它。

如果是php，那么我只会这样做：

<?php
if( $index == count( $items)/2 ):
  echo '</div>';
  echo '</div>';
  echo '<div class="col-md-6">';
  echo '<div class="item-container">';
endif;
?>

..。但事实并非如此。我在找另一种VUE-Alternative。我尝试了this：

{{#if key === Number( items.length / 2 ) }}
  </div>
  </div>
  <div class="col-md-6">
  <div class="item-container">
{{/if}

但是它不起作用。据我所知，这不是"真正的方式"。但我想不出什么才是。：-/

是否存在这样的东西？

我当前代码的简化

<div class="col-md-12">
    <div class="items-container">
        <div class="item-container" v-for="item, key in items['data']">
            <!-- A BUNCH OF ITEM-INFO -->
        </div><!-- /.item-container -->
    </div><!-- /.items-container -->
</div><!-- /.col-md-12 -->

推荐答案

我要做的是创建一个计算属性，将项目数组划分(或分块)为适当数量的列。

下面的示例使用弹性框布局和一个额外的列元素。

new Vue({
  el: 'main',
  data: {
    items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6', 'Item 7'],
    cols: 2
  },
  computed: {
    columns () {
      let columns = []
      let mid = Math.ceil(this.items.length / this.cols)
      for (let col = 0; col < this.cols; col++) {
        columns.push(this.items.slice(col * mid, col * mid + mid))
      }
      return columns
    }
  }
})

.container {
  display: flex;
  border: 1px solid;
}
.col {
  margin: 10px;
  border: 1px solid;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.item-container {
  border: 1px solid;
  padding: 5px;
  margin: 5px;
}

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script>
<main>
<p><label>Columns:<label> <input type="number" v-model="cols"></p>
<div class="container">
  <div class="col" v-for="column in columns">
    <div class="item-container" v-for="item in column">{{item}}</div>
  </div>
</div>
</main>

如果您希望以一种不太冗长的方式对Items数组进行分块，请参阅Split array into chunks

这篇关于v-if在v-用于在两列中显示项目列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！