v-for 루프를 사용하여 다른 색상 배경 바인딩

v-for 루프를 사용하여 다른 색상 배경 바인딩

나는 부에티피(Vuetify)를 사용하고 배경으로 적용하고자 하는 다양한 헥스코드가 포함된 자바스크립트 오브젝트를 통해 반복하려고 한다.

최종 결과는 다음과 같이 보일 것이다.

나는 각각의 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

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>
   

이미 반복되고 있으므로 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>

여기 일하는 fiddle https://jsfiddle.net/skribe/00cf8z7x/4/

구문을 잘 읽으려면 객체의 16진수를 16진수로 변경하십시오.

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

그러면 당신은 당신의 v-for를 다음과 같이 쓸 수 있다.v-for="hex in color.hexs"

참조URL: https://stackoverflow.com/questions/49463729/binding-different-color-backgrounds-using-v-for-loop