How to specify index of array in v-for in vuejs?

Question

I have an array of color in my vuex state and in my component I want to specify each color for each element that comes from v-for.

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

here is what i have tried

// 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>

I want something like this, subject1 has color red, subject2 has color blue, subject3 has color green, ..etc.

With what i have tried i got this error

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

How can achieve it?

Sunny Prakash · Accepted Answer · 2020-10-04 07:30:01Z

2

Your state object has classBackGroud but you are trying to render classBackGround. Seems like a spelling mistake. Otherwise, the code looks good to me. Try rectifying the property name.

answered Oct 4, 2020 at 7:30

Sunny Prakash

8801 gold badge9 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to specify index of array in v-for in vuejs?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related