我很抱歉发布这篇文章,因为我可以看到很多类似的问题已经被问了好几次了。下面是那些几乎能帮助我的问题,以及为什么他们没有:
- This一个是因为计算不应该在渲染中完成,而应该在方法/计算部分完成,这对我没有帮助。
- Thisone使用了两个不同的模板,将
v-if
写在template-tag上,这在我的例子中看起来很愚蠢,因为这两个模板有98%是相同的。 - This Medium-article解决了一个与我的问题 * 非常非常 * 接近的问题。然而,-它是在他的情况下过滤用户(这是通过计算属性解决的),而不是在某个迭代中插入代码片段的if子句(这是我认为我正在寻找的)。
∮问题是
我有一个项目列表,正在从API中提取,-因此金额将发生变化。我希望它们显示在两列中,如下所示:
-----------------
| Item1 Item5 |
| Item2 Item6 |
| Item3 Item7 |
| Item4 |
-----------------
我使用v-for
循环遍历它们。
∮我的尝试∮
1.* * 对display: flex
使用纯CSS**
但那只能做到这一点:
-----------------
| Item1 Item2 |
| Item3 Item4 |
| Item5 Item6 |
| Item7 |
-----------------
1.* * 在column-count: 2;
中使用CSS**
但是柱中间元件的断裂,考虑display: block; overflow: hidden;
和许多其它尝试。应该说,这些元件的高度可以变化。
1.* * 所以我放弃了用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>
</div>
</div>
3条答案
按热度按时间yv5phkfx1#
我要做的是创建一个计算属性,将items数组划分(或分块)为适当数量的列。
下面的示例使用了一个Flexbox布局和一个额外的 * column * 元素。
如果您希望使用一种不太冗长的方式来分块items数组,请参见Split array into chunks
mspsb9vt2#
很高兴看到有人和我遇到了同样的问题。我必须在每列中放置6个项目。我将API响应切片到列中,然后打印它们。
ColArray是一个包含列数组的数组,如下所示:
在Vue中,它只是循环通过,如下所示:
下面是一个小提琴示例:
https://jsfiddle.net/keysl183/50wL7mdz/775484/
dsf9zpds3#
对于任何试图达到相同结果(将项划分为列),但拆分对象而不是数组的人。
此解决方案基于Phil选择的答案。
它使用Object.keys来遍历对象,使用Object.entries来返回对象的数组,而不是通过html模板中的索引来访问,你可以通过键来完成。