joshgallagher24
2 years ago
75
5
Vue

Vue.js v-for help!

Posted 2 years ago by joshgallagher24

I have a vue component that spits out a list of articles. I want to apply color classes to these articles.

in the article-item component I have an array of classes:

    data () {
      return {
        titleColors: [
          'article-item__title--green',
          'article-item__title--pink',
          'article-item__title--purple',
          'article-item__title--blue'
        ]
      }
    }

The problem is, i can only add these classes to the first 4 articles that are rendered as the array length is 3.

Is there anyway I can apply these classes to the first 4 articles, and then reset the v-for index?

This is where I am looping through the articles:

<article-item v-for="(article, index) in articles.articles" :article="article" :key="article.id" :index="index" :length="articles.articles.length"></article-item>

Any help would be much appreciated!

Please sign in or create an account to participate in this conversation.