时间戳

首页 > 解决方案 > 如何在 vuejs 中指定 v-for 中的数组索引？

vue.js - 如何在 vuejs 中指定 v-for 中的数组索引？

问题描述

我的 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>

我想要这样的东西，subject1有红色，subject2有蓝色，subject3有绿色，..等等。

通过我的尝试，我得到了这个错误

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

怎样才能实现呢？

标签： vue.jsv-for

解决方案

您的state对象有classBackGroud，但您正在尝试渲染classBackGround. 好像是拼写错误。否则，代码对我来说看起来不错。尝试更正属性名称。

推荐阅读