[Vuejs]-How can i change background of items which are in v-for loop vuejs?

by

1👍

✅

Define th colors array then use the index to get a color :

data(){
  return {
 colors : ['red', 'blue', 'green'],
  items: [
        {
          cardTitle: 'Mathew Slick attached 2 files',
          dateTime: '15 min ago',
          contentTitle: 'Article / Post',
          contentValue:
            'The history of video game is as interesting as a fairy tale. The quality of today’s video game was not at all there when',
          bgColor: 'red',

        },
        {
          cardTitle: 'Mathew Slick attached 2 files',
          dateTime: '15 min ago',
          contentTitle: 'Article / Post',
          contentValue:
            'The history of video game is as interesting as a fairy tale. The quality of today’s video game was not at all there when',
          bgColor: 'green',
        },
]

}

}

in template :

<div v-for="(item, index) in items">
    <div :style="{'background-color':colors[index]}">
        {{item}}
    </div>
</div>
👤Boussadjra Brahim

3👍

To add a different background-color for each card, you can add a property inside your items array.

items: [
        {
          cardTitle: 'Mathew Slick attached 2 files',
          dateTime: '15 min ago',
          contentTitle: 'Article / Post',
          contentValue:
            'The history of video game is as interesting as a fairy tale. The quality of today’s video game was not at all there when',
          bgColor: 'red',

        },
        {
          cardTitle: 'Mathew Slick attached 2 files',
          dateTime: '15 min ago',
          contentTitle: 'Article / Post',
          contentValue:
            'The history of video game is as interesting as a fairy tale. The quality of today’s video game was not at all there when',
          bgColor: 'green',
        },
]

While looping add a style like this

<div v-for="(item, index) in items">
    <div :style="`background-color: ${item.bgColor}`">
        {{item}}
    </div>
</div>

// Edit – Need the background color outside of the items array ( not a good way though )

bgColors: ['red', 'green'],
items: [
        {
          cardTitle: 'Mathew Slick attached 2 files',
          dateTime: '15 min ago',
          contentTitle: 'Article / Post',
          contentValue:
            'The history of video game is as interesting as a fairy tale. The quality of today’s video game was not at all there when',
        },
        {
          cardTitle: 'Mathew Slick attached 2 files',
          dateTime: '15 min ago',
          contentTitle: 'Article / Post',
          contentValue:
            'The history of video game is as interesting as a fairy tale. The quality of today’s video game was not at all there when',
        },
]

/* the loop will take the same index color and add it to the card. */
<div v-for="(item, index) in items">
    <div :style="`background-color: ${bgColors[index]}`">
        {{item}}
    </div>
</div>
👤Mohib Arshi

Leave a comment