У меня есть массив цветов в моем состоянии 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"
Как этого добиться?