Just diving into Vue and experimenting with displaying a grid of cards. I've managed to group them into rows of three, but now I want each row to have a distinct class assigned from an array of classes. However, I'm a bit stuck on how to achieve this with my current setup.
I attempted to use v-bind:class on the row element, but I'm unsure if that's the right approach for what I have in mind.
This is how my HTML structure looks:
<div class="row" v-for="i in rows”>
<div v-for="(item, index) in getRowItems(i)" class="card" v-bind:class="{ new: item.new }">
<img v-bind:src="item.illustration">
<p>{{ item.name }}</p>
</div>
</div>
And here's my Vue code. The data is stored in an object called itemList.
let app = new Vue({
el: '#container',
data: {
rowItems: 3,
items: itemList,
rowClasses: ['row1', 'row2', 'row3', 'row4']
},
computed:{
rows:function(){
return Math.ceil(this.items.length / this.rowItems);
},
},
methods:{
getRowItems:function(index){
return this.items.slice((index - 1) * this.rowItems, index * this.rowItems)
}
}
});