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

Posted 2023-02-16

【中文标题】使用 v-for 循环绑定不同颜色的背景

【英文标题】：Binding different color backgrounds using v-for loop

【发布时间】：2018-09-02 23:03:46

【问题描述】：

我正在使用 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>

这是数据对象：

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

【问题讨论】：

您遇到了什么错误？

【参考方案1】：

有两个错误：

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

hex 是在color.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>

【讨论】：

感谢 Vamsi 的清晰解释，它就像一个魅力！

【参考方案2】：

稍微改变你的 v-for 循环，因为你已经在迭代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 写成v-for="hex in color.hexs"