For a VueJS 2 project, I am tasked with enhancing the display of the first and second elements in an array by making them stand out from the rest. To achieve this, I am utilizing the v-for syntax to iterate over a child component within a parent component.
After conducting some research, I discovered that you can add a second argument to the v-for loop such as v-for="(item, index)" of items, where the index and index+1 should be bound as HTML classes to customize the rendering of the first and second elements. While I have included the code below which "almost works," I am encountering an issue as my card is being repeated too many times (3 times). Is there a more elegant way to accomplish this task in VueJS?
Parent Component:
<template>
<div>
<child-card v-for="(item, index) of items" :item="item" :index="index">
</child-card>
</div>
</template>
<script>
export default {
name: 'parent-video-list',
components: {
ChildCard
},
props: {
items: {
type: Array,
required: true
}
}
};
</script>
Child Component:
<template>
<main>
<a :href="item.link"></a>
<img :src="item.image.url" alt="">
<footer>
<h2>{{ item.title }}</h2>
<div class="author">{{ item.creator }}</div>
</footer>
</main>
<main v-if="index">
<a :href="item.link"></a>
<img :src="item.image.url" alt="">
<footer>
<h2>{{ item.title }}</h2>
<div class="author">{{ item.creator }}</div>
</footer>
</main>
<main v-if="index + 1" class="highligths2">
<a :href="item.link"></a>
<img :src="item.image.url" alt="">
<footer>
<h2>{{ item.title }}</h2>
<div class="author">{{ item.creator }}</div>
</footer>
</main>
</template>
<script>
export default {
name: 'childcard',
props: {
item: {
type: Object,
required: true
},
index: {
type: Number
// required: true
}
}
};
</script>
PS: The second block within the child component will have different CSS classes