Vue.js 使用v-for循环绑定不同颜色背景

我正在使用vuetify，并尝试遍历一个javascript对象，该对象包含我希望作为背景应用的不同HEXCODE

最终结果如下所示：

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

下面是我试图做的事情：

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

---

有两个错误：

在

中，您正在使用

v-for=“color In colors”

进行迭代，因此

color

是在

colors

数组中迭代的数组项的别名。但是在

v-card>

元素的

div

标记中，您正在迭代

colors.hex

。所以它应该是color.hex中的

v-for=“（十六进制，索引）”

而不是

colors.hex

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>

{{color.title}}

---

稍微更改v-for循环，因为您已经在迭代

color.hex

了，所以只需要引用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>

---

然后，您可以将您的v-for编写为

v-for=“hex in color.hexs”

您遇到了什么错误？感谢Vamsi的清晰解释，它工作起来很有魅力！

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

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