如何解决如何在vue.js中的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的颜色为绿色,.. etc。
使用我尝试过的方法,我遇到了这个错误
[Vue warn]: Error in render: "TypeError: Cannot read property '0' of undefined"
如何实现?
解决方法
您的state
对象具有classBackGroud
,但是您正在尝试渲染classBackGround
。好像是拼写错误。否则,代码对我来说看起来不错。尝试更正属性名称。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。