使用v-for循环绑定不同的颜色背景

Question

我正在使用vuetify，并尝试遍历包含要用作背景的不同十六进制代码的javascript对象。

最终结果将如下所示：

我试图将每个十六进制代码绑定到每个不同项目颜色的背景。

下面是我正在尝试做的事情：

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

这是数据对象：

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'
            }
            ]
        }
      }
  }

Answer 1

有两个错误：

1. 在<v-flex>您要使用v-for="color in colors"进行迭代，因此color是要在colors数组中迭代的数组项的别名。 但是在v-card>元素的div标签中，您正在遍历colors.hex 。 因此，它应该是v-for="(hex, index) in color.hex"而不是colors.hex

2. hex是要在color.hex中迭代的项目，它是一个字符串。 因此，您可以直接使用它，而无需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> 

Answer 2

稍微更改v-for循环，由于您已经在color.hex进行了迭代， color.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>

这是一个工作的小提琴https://jsfiddle.net/skribe/00cf8z7x/4/

如果您希望语法阅读得很好，则将对象中的十六进制更改为十六进制

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

然后，您可以将v-for="hex in color.hexs" v-for编写为v-for="hex in color.hexs"