Binding different color backgrounds using v-for loop

Question

I am using vuetify and trying to iterate through a javascript object containing the different hexcodes I want to apply as background.

The end result would look something like this:

I am trying to bind each Hexcode to the background of each different item-color.

Here under is how I'm trying to do things:

<!-- Color Cards -->
           <v-container grid-list-md text-xs-center>
              <v-layout row wrap>
                <v-flex class="item" xs12 sm4 v-for="color in colors" :key="color.id">
                  <v-card  ripple hover class="">
                    <div  class="item-color"
                          v-for="(hex, index) in colors.hex"
                          :key="index"
                          :style="{ 'background-color': hex[index]}">
                    </div>
                    <v-card-text class="px-0">{{ color.title }}</v-card-text>
                  </v-card>
                </v-flex>
              </v-layout>
            </v-container>

Here is the data object:

export default {
      data () {
        return {
            colors: [
            {
              id: 'ssmf',
              hex: ['#297afb','#2898fb','#01d8fd'],
              title: 'Sleek, Sophisticated, Mature & Formal'
            },
            {
              id: 'hlfss',
              hex: ['#297afb','#2898fb','#01d8fd'],
              title: 'Honest, Loyal, Friendly, Stable, & Strong'
            }
            ]
        }
      }
  }

Declamatory

What error are you experiencing? – Rudman

Answer 1

There are two mistakes:

1. In <v-flex> you are iterating using v-for="color in colors" , so color is the alias for the array item being iterated in colors array. But In v-card> element's div tag you are iterating over colors.hex. So it should be v-for="(hex, index) in color.hex" not colors.hex

2. hex is the item being iterated in color.hex which is a string. So you can use it directly, no need of hex[index]

   <v-container grid-list-md text-xs-center>
     <v-layout row wrap>
       <v-flex class="item" xs12 sm4 v-for="color in colors" :key="color.id">
         <v-card  ripple hover class="">
           <div  class="item-color"
                 v-for="(hex, index) in color.hex"
                 :key="index"
                 :style="{ 'background-color': hex}">
           </div>
           <v-card-text class="px-0">{{ color.title }}</v-card-text>
         </v-card>
       </v-flex>
     </v-layout>
   </v-container>
   

Nadaba

Thanks for the clear explanation Vamsi, it worked like a charm! – Declamatory

Answer 2

Change your v-for loops slightly, and since you are already iterating over color.hex all you need to reference is the hex.

<div v-for="color in colors">
    <div  class="item-color"
          v-for="(hex, index) in color.hex"
          :key="index"
          :style="{ 'background-color': hex}">
   </div>
</div>

Here is a working fiddle https://jsfiddle.net/skribe/00cf8z7x/4/

If you want your syntax to read well then change hex in your object to hexs

colors: [
        {
          id: 'ssmf',
          hexs: ['#297afb','#2898fb','#01d8fd'],
          title: 'Sleek, Sophisticated, Mature & Formal'
        },
   ....

Then you can write your v-for as v-for="hex in color.hexs"

Rudman