I need help with mapping an array of cards wrapped in a div. I want the first, second, second-to-last, and last divs to go on a new line or take up the entire row. My project is in Vue3 and I'm using the PrimeVue component library.
<div class="row" v-for="(task, index) in tasks" :class="{
'p-col-12 dp-block': index === 0,
'p-col-12 dp-block': index === 1,
'p-col-12': index == tasks.length-2,
'p-col-12': index === tasks.length-1,
}" :key="task">
<Card style="width: 25em; vertical-align: middle;">
// card content
</Card>
</div>
In this code snippet, I am assigning the "p-col-12" class based on the index of each item in my array. If the index is 0, 1, tasks.length-1, or tasks.length-2, the class should be applied.
However, I noticed that the second-to-last element is missing the class in the output.
While my conditional styling logic seems correct, I would appreciate feedback from more experienced developers.