[Vuejs]-How to render different CSS classes in each element using v-for

by

0👍

✅

Based on the comments you have left underneath your question, you just need to generate classes that look like ct-series-b.

In that case, you could create an array that stores all of the letters (to be used for index to letter conversion). The index of the array will match the index of item;

let alphabet = ['a', 'b', 'c', 'd', 'e'] // ...

methods: {
  getClass: function(index){
    return 'ct-series-' + alphabet[index];
  }
}
<v-flex>
   <span class="pie-chart-label" :class="getClass(index)">{{item}}</span>
</v-flex>

Leave a comment