I apologize for reiterating this, as I have noticed that many questions similar to mine have been asked multiple times. Here are the ones that almost helped me and why they fell short:
- This specific question advised against performing calculations within the rendering process but suggested utilizing methods/computed properties instead, which was not applicable in my case.
- This inquiry proposed using two distinct templates with
v-if, but in my scenario where the templates were nearly identical, it seemed impractical. - This Medium article tackled a similar issue to mine involving user filtering dealt with through computed properties, while what I sought was an if-clause to insert code snippets at specific iterations.
The Issue
I am fetching a list of items from an API, meaning the quantity will fluctuate. I aim to display them in two columns arranged like so:
-----------------
| Item1 Item5 |
| Item2 Item6 |
| Item3 Item7 |
| Item4 |
-----------------
To iterate through them, I am using a v-for loop.
My Attempts
- Utilizing pure CSS with
display: flex
This approach yielded the following layout:
-----------------
| Item1 Item2 |
| Item3 Item4 |
| Item5 Item6 |
| Item7 |
-----------------
- Implementing CSS with
column-count: 2;
However, this method resulted in column breaks occurring mid-element, irrespective of applying
display: block; overflow: hidden;- Hence, I abandoned the idea of resolving it via CSS.
If this were done in php, I would simply do something like this:
<?php
if( $index == count( $items)/2 ):
echo '</div>';
echo '</div>';
echo '<div class="col-md-6">';
echo '<div class="item-container">';
endif;
?>
... However, since it's not PHP, I seek a Vue.js alternative. I attempted this:
{{#if key === Number( items.length / 2 ) }}
</div>
</div>
<div class="col-md-6">
<div class="item-container">
{{/if}
Regrettably, it didn't work, and it appears to deviate from 'the Vue way' of accomplishing such tasks. I'm struggling to discern the correct approach. :-/
Is there a recommended solution for this?
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>
</div>
</div>