Highlight index and index+1 using v-for second argument in VueJS 2

Question

According to a VueJS 2 project, I need to "highlight" the first and the second element of an array (they have to be bigger than the others), I am using the v-for syntax to itering on a child component from a parent.

After searching for a while I found that you could call a second argument on the v-for suching as v-for="(item, index)" of items where the index and index+1 should be bind as HTML classes to modify the rendering of the first and the second. Hope I am clear enough..feel free to ask me if needed.. I writed the code below it almost works but I still got an issue because my card is repetead to much actually (3 times)..is there a way more elegant to make the job 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 : Where the second block in the child wihave different css classes

Answer 1

As you only want to style the items at certain indexes, I'd suggest having a look at:

https://v2.vuejs.org/v2/guide/class-and-style.html

Implementing it could look something like this:

<main v-bind:class="{ highlights1: index === 0, highlights2: index === 1 }">
    ...
</main>

or cleaner using a computed property, but I'll leave that to you to implement.