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

Why are you writing $index when index alone should work ? getBgColor(index) alone should do the job here, have you tried it ? — Jake
– Jake, Commented Nov 25, 2019 at 10:18
@Jake - I agree that will work too... but thats not my issue the issue is how to set the class from 1-9 and restart (blue thru cyan and then back to blue ... cyan). Any idea??? — Scott
– Scott, Commented Nov 25, 2019 at 10:29
What I would do would be to define a global class with a modifier : bg-color--1, bg-color--2, bg-color--3, bg-color--4, etc. And then set them in your loop as :class="bg-color--' + index" :) — Jake
– Jake, Commented Nov 25, 2019 at 11:04
how about just having an array bg_color=['bg-cyan','bg-green' ...] you can pass index from function. Store the index in vuejs data variable. update it with index Just keep track of track of length of bg_color if index is more than the ` (index > bg_color.length -1) reset the data variable to index to beginning — Macintosh_89
– Macintosh_89, Commented Nov 25, 2019 at 11:13

Kalimah · Accepted Answer · 2019-11-25 12:55:38Z

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": "[email protected]",
      },
      {
        "name": "Ervin Howell",
        "email": "[email protected]",
      },
      {
        "name": "Clementine Bauch",
        "email": "[email protected]",
      },
      {
        "name": "Patricia Lebsack",
        "email": "[email protected]",
      },
      {
        "name": "Chelsey Dietrich",
        "email": "[email protected]",
      },
      {
        "name": "Mrs. Dennis Schulist",
        "email": "[email protected]",
      },
      {
        "name": "Kurtis Weissnat",
        "email": "[email protected]",
      },
      {
        "name": "Nicholas Runolfsdottir V",
        "email": "[email protected]",
      },
      {
        "name": "Glenna Reichert",
        "email": "[email protected]",
      },
      {
        "name": "Clementina DuBuque",
        "email": "[email protected]"
      }, {
        "name": "Leanne Graham",
        "email": "[email protected]",
      },
      {
        "name": "Ervin Howell",
        "email": "[email protected]",
      },
      {
        "name": "Clementine Bauch",
        "email": "[email protected]",
      },
      {
        "name": "Patricia Lebsack",
        "email": "[email protected]",
      },
      {
        "name": "Chelsey Dietrich",
        "email": "[email protected]",
      },
      {
        "name": "Mrs. Dennis Schulist",
        "email": "[email protected]",
      },
      {
        "name": "Kurtis Weissnat",
        "email": "[email protected]",
      },
      {
        "name": "Nicholas Runolfsdottir V",
        "email": "[email protected]",
      },
      {
        "name": "Glenna Reichert",
        "email": "[email protected]",
      },
      {
        "name": "Clementina DuBuque",
        "email": "[email protected]"
      }
    ],
    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>

Collectives™ on Stack Overflow

How to set css class in vue within for loop?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related