vue.js - 使用 v-for 循环绑定(bind)不同颜色的背景

Question

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

最终结果看起来像这样:

我正在尝试将每个 Hexcode 绑定(bind)到每个不同项目颜色的背景。

以下是我尝试做事的方式:

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