У меня есть массив цветов в моем состоянии vuex, и в моем компоненте я хочу указать каждый цвет для каждого элемента, который поступает из v-for.

// state
state: {
    APIData: {
      userInfo: {},
      allClasses: [
        {
          subject: 'subject1',
          ...
        },
        {
          subject: 'subject2',
          ...
        },
        {
          subject: 'subject3',
          ...
        }
      
      ],
      classBackGroud: ['red', 'blue', 'green',..],
    },
  },

Вот что я пробовал

// component
<v-card
   class="col-12"
   v-for="(course, index) in APIData.allClasses"
   :key="course.subject"
   v-bind:style="{color: APIData.classBackGround[index]}"
>
   {{ course.subject }}
</v-card>

Я хочу что-то вроде этого, объект 1 имеет красный цвет, объект 2 имеет синий цвет, объект 3 имеет зеленый цвет и т. Д.

С тем, что я пробовал, я получил эту ошибку

[Vue warn]: Error in render: "TypeError: Cannot read property '0' of undefined"

Как этого добиться?

0
Carlos 4 Окт 2020 в 10:16

1 ответ

Лучший ответ

В вашем объекте state есть classBackGroud, но вы пытаетесь визуализировать classBackGround. Похоже на орфографическую ошибку. В остальном код мне нравится. Попробуйте исправить имя свойства.

2
sunny prakash 4 Окт 2020 в 07:30