我很抱歉发布这篇文章，因为我可以看到很多类似的问题已经被问了好几次.以下是那些接近于帮助我的人——以及他们为什么没有:
- This一个原因是，计算不应该在渲染中进行，而应该在"方法/计算"部分进行.这对我没有帮助.
-
This一个是使用两个不同的模板，在模板标签上写
v-if.在我的例子中，这似乎是愚蠢的，因为这两个模板将是98%相同的. - This篇中等篇幅的文章解决了我身边的一个问题.然而，在他的例子中，这是对用户的过滤(由计算(computed)属性来解决)，而不是在某个迭代中插入代码片段的if子句(我想这就是我要寻找的).
The problem
我有一个从API中提取的项目列表，所以数量会发生变化.我希望它们显示在两列中:
-----------------
| Item1 Item5 |
| Item2 Item6 |
| Item3 Item7 |
| Item4 |
-----------------
我用一个v-for的循环遍历它们.
My attempts
- Using pure CSS with 100
但这只能做到这一点:
-----------------
| Item1 Item2 |
| Item3 Item4 |
| Item5 Item6 |
| Item7 |
-----------------
- Using CSS with 100
但那断列中的元素，就display: block; overflow: hidden;和许多其他try 而言.应该说，这些元素的高度可能会有所不同.
- So I gave up on fixing it using 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}
但它不起作用.据我所知，这不是"vue方式".但我不知道是什么-/
有这样的东西吗？
A simplification of my current code
<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 -->