How to set css class in vue within for loop?

Question

I am trying to achieve something like this with Vuejs Color coded list of client

Here is how my vue code looks like

<div class="list-group-item" data-toggle="sidebar" data-sidebar="show" v-for="(client, index) in clients" :key="client.id">
    <a href="#" class="stretched-link"></a>
    <div class="list-group-item-figure">
        <div class="tile tile-circle" :class="getBgColor(++index)"> {{ client.name.charAt(0) }} </div>
    </div>
    <div class="list-group-item-body">
        <h4 class="list-group-item-title"> {{ client.name }} </h4>
        <p class="list-group-item-text"> {{ client.city }}, {{ client.country }} </p>
    </div>
</div>

and here is my script i have the switch case that i want to use to get the appropriate css class

getBgColor(color) {

    let bg_color = 'bg-blue';

    switch(color) {
    case 1:
        bg_color = 'bg-blue'
        break;
    case 2:
        bg_color = 'bg-indigo'
        break;
    case 3:
        bg_color = 'bg-purple'
        break;
    case 4:
        bg_color = 'bg-pink'
        break;
    case 5:
        bg_color = 'bg-red'
        break;
    case 6:
        bg_color = 'bg-orange'
        break;
    case 7:
        bg_color = 'bg-yellow'
        break;
    case 8:
        bg_color = 'bg-green'
        break;
    case 9:
        bg_color = 'bg-cyan'
        break;
    default:
        bg_color = ''
    }
    this.colorCode++
    return bg_color
}
},

Answer 1

You can add your classes to an array and then inside getBgColor(index) check how many turns have been taken and deduct the required index. I commented the function to explain it further.

Also, in your html, you don't have to increment $index.

new Vue({
  el: "#app",
  data: {
    colorCounter: 0,
    clients: [{
        "name": "Leanne Graham",
        "email": "Sincere@april.biz",
      },
      {
        "name": "Ervin Howell",
        "email": "Shanna@melissa.tv",
      },
      {
        "name": "Clementine Bauch",
        "email": "Nathan@yesenia.net",
      },
      {
        "name": "Patricia Lebsack",
        "email": "Julianne.OConner@kory.org",
      },
      {
        "name": "Chelsey Dietrich",
        "email": "Lucio_Hettinger@annie.ca",
      },
      {
        "name": "Mrs. Dennis Schulist",
        "email": "Karley_Dach@jasper.info",
      },
      {
        "name": "Kurtis Weissnat",
        "email": "Telly.Hoeger@billy.biz",
      },
      {
        "name": "Nicholas Runolfsdottir V",
        "email": "Sherwood@rosamond.me",
      },
      {
        "name": "Glenna Reichert",
        "email": "Chaim_McDermott@dana.io",
      },
      {
        "name": "Clementina DuBuque",
        "email": "Rey.Padberg@karina.biz"
      }, {
        "name": "Leanne Graham",
        "email": "Sincere@april.biz",
      },
      {
        "name": "Ervin Howell",
        "email": "Shanna@melissa.tv",
      },
      {
        "name": "Clementine Bauch",
        "email": "Nathan@yesenia.net",
      },
      {
        "name": "Patricia Lebsack",
        "email": "Julianne.OConner@kory.org",
      },
      {
        "name": "Chelsey Dietrich",
        "email": "Lucio_Hettinger@annie.ca",
      },
      {
        "name": "Mrs. Dennis Schulist",
        "email": "Karley_Dach@jasper.info",
      },
      {
        "name": "Kurtis Weissnat",
        "email": "Telly.Hoeger@billy.biz",
      },
      {
        "name": "Nicholas Runolfsdottir V",
        "email": "Sherwood@rosamond.me",
      },
      {
        "name": "Glenna Reichert",
        "email": "Chaim_McDermott@dana.io",
      },
      {
        "name": "Clementina DuBuque",
        "email": "Rey.Padberg@karina.biz"
      }
    ],
    classes: ['bg-blue', 'bg-indigo', 'bg-purple', 'bg-pink', 'bg-red', 'bg-orange', 'bg-yellow', 'bg-green', 'bg-cyan']
  },
  methods: {
    getBgColor: function(index) {
      // Get length of  classes array
      let length = this.classes.length;

      // Get the current turn (how many times the classes have been used from start to finish)
      let turn = Math.floor(index / length);

      // Multiply turn by the length then subtract result from current index
      let colorIndex = index - (turn * length);

      return this.classes[colorIndex];
    }
  }

});

@import url("https://fonts.googleapis.com/css?family=Roboto");
.list {
  padding: 1rem;
  font-family: 'Roboto', sans-serif;
}

.list-group-item {
  display: flex;
  width: 100%;
}

.list-group-item .list-group-item-figure {
  display: flex;
  justify-content: center;
  align-items: center;
}

.list-group-item .list-group-item-figure .tile {
  border-radius: 50%;
  height: 2.5rem;
  width: 2.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
  text-transform: uppercase;
  font-weight: bold;
}

h4,
p {
  margin: 0.5rem;
}

p {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding-bottom: 1rem;
}

.bg-blue {
  background-color: blue;
}

.bg-indigo {
  background-color: indigo;
}

.bg-purple {
  background-color: purple;
}

.bg-pink {
  background-color: pink;
}

.bg-red {
  background-color: red;
}

.bg-orange {
  background-color: orange;
}

.bg-yellow {
  background-color: yellow;
}

.bg-green {
  background-color: green;
}

.bg-cyan {
  background-color: cyan;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id='app'>
  <div class='list'>


    <div class="list-group-item" data-toggle="sidebar" data-sidebar="show" v-for="(client, $index) in clients" :key="$index">
      <a href="#" class="stretched-link"></a>
      <div class="list-group-item-figure">
        <div class="tile tile-circle" :class="getBgColor($index)"> {{ client.name.charAt(0) }} </div>
      </div>
      <div class="list-group-item-body">
        <h4 class="list-group-item-title"> {{ client.name }} </h4>
        <p class="list-group-item-text"> {{ client.email }}, {{ client.country }} </p>
      </div>
    </div>
  </div>
</div>