问题

Question

很抱歉张贴此帖子-因为我看到很多类似的问题已经问了好几次了。以下是一些可以帮助我的内容-以及为什么他们没有这样做的原因：

This的一个原因是，不应在渲染中进行计算，而应在方法/计算部分进行计算。那对我没有帮助。
This是使用两个不同的模板，在模板标签上写入v-if。在我的情况下，这看起来很愚蠢，因为两个模板的一致性为98％。
This中篇文章非常非常接近地解决了一个问题。但是，-这是对用户的过滤（通过计算属性来解决），而不是在某些迭代中插入代码段的if子句（这是我想寻找的）。 / li>

问题

我有一个从API中提取的项目列表，因此数量会发生变化。我希望它们在两列中显示为：

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

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

我的尝试

将纯CSS与display: flex

但这只能做到这一点：

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

将CSS与column-count: 2;

但是列中间元素，display: block; overflow: hidden;的问候和许多其他尝试的突破。应该说，这些元件的高度可以变化。

所以我放弃了使用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替代品。我尝试过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 -->

Answer 1

我要做的是创建一个计算属性，将items数组划分（或分块）为适当数量的列。

这是一个使用弹性框布局和一个额外的 column 元素的示例。

item temp_q[65000] = profile_arr[0].item_queue;

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

如果您希望使用一种不太冗长的方式将项目数组分块，请参阅Split array into chunks

Answer 2

很高兴看到有人偶然发现与我相同的问题。我必须在每列中放置6个项目。我将API响应切成几列，然后打印出来。

let allCategory = response.body.Categories.slice(); //clone
while (allCategory.length > 0) {
  let chunk = allCategory.splice(0,6);
  this.ColArray.push(chunk);
}

ColArray是一个数组，它将包含列的数组。看起来像这样：

{
  ColArray: [
    Column1: [
      Item1,
      Item2,
      Item3,
    ],
    Column2: [
      ...
    ]
  ]
}

在Vue中，它将像这样循环遍历：

<div v-for="(col,colIndex) in ColArray" :key="'cate_col'+colIndex" class="col-md-2">
  <div v-for="(row,rowIndex ) in col"   :key="'cate_row'+colIndex + rowIndex" class="row">
    {{row}}
  </div>
</div>

这是一个小提琴样本：

https://jsfiddle.net/keysl183/50wL7mdz/775484/

Answer 3

对于任何试图获得相同结果（将项目划分为列），但拆分对象而不是数组的人来说。

此解决方案基于Phil的选定答案。

它使用Object.keys遍历对象，并使用Object.entries返回对象之外的数组。与其通过html模板中的索引进行访问，不如通过键进行操作。

new Vue({
    el: 'main',
    data: {
        items: { 
          item1: { name: 'Item 1' }, 
          item2: { name: 'Item 2' }, 
          item3: { name: 'Item 3' },
          item4: { name: 'Item 4' },
          item5: { name: 'Item 5' },
          item6: { name: 'Item 6' },
          item7: { name: 'Item 7' },
          item8: { name: 'Item 8' },
          item9: { name: 'Item 9' },
          item10: { name: 'Item 10' },
        },
        cols: 2
    },
    computed: {
          columns: function() {
              let columns = [];
              let mid = Math.ceil(Object.keys(this.items).length / this.cols);

              for (let col = 0; col < this.cols; col++) {
                  columns.push(Object.entries(this.items).slice(col * mid, col * mid + mid).map(entry => entry[1]));
              }
              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://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.js"></script>
<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, index) in Object.keys(column)">
        {{column[item].name}}</div>
      </div>
    </div>
</main>

V-如果在V-内部-在两列中显示项目列表

问题

我的尝试

我当前代码的简化

3 个答案: