Связывание фонов разного цвета с помощью цикла v-for

Я использую 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'
            }
            ]
        }
      }
  }

vue.js vuejs2 v-for
person Tony    schedule 24.03.2018    source источник
comment
С какой ошибкой вы столкнулись?   -  person skribe    schedule 24.03.2018

Ответы (2)


arrow_upward
5
arrow_downward

Есть две ошибки:

  1. В <v-flex> вы выполняете итерацию с использованием v-for="color in colors", поэтому color - это псевдоним для элемента массива, повторяемого в массиве colors. Но в теге div элемента v-card> вы повторяете 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>
person Vamsi Krishna    schedule 24.03.2018
comment
Спасибо за четкое объяснение, Вамси, это сработало как шарм! - person Tony; 24.03.2018

arrow_upward
2
arrow_downward

Немного измените циклы 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"

person skribe    schedule 24.03.2018