css - forループ内でvueにcssクラスを設定するには?

Question

私は クライアントのVuejs色分けされたリストでこのようなことを達成しようとしています

私のvueコードは次のようになります

<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>

これが私のスクリプトです。適切なcssクラスを取得するために使用したいスイッチケースがあります

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
}
},