v-for索引未显示在组件中

Question

我有一个Vue组件，我想在其中打印每个项目的索引。该组件与v-for之类的父组件一起使用

<WorkCard v-for="(obj,index) in work_item_list" v-bind:key="index"></WorkCard>

现在在子组件WorkCard.Vue

中

<template>
    <div>
        <div class="work-card mt-2 mb-2">
              <span>{{workItem.work_title}}</span>
        </div>
        <div class="border border-info">{{index}}</div>
    </div>
</template>

export default {
 name: 'WorkCard',
 props: {
   workItem: {type: Object, default: null},
   //also tried as following
   //index:{type:Number,default:0}
 }

此index从未显示。尝试index:{type:Number,default:0}时，请始终打印0。 我在控制台中的work_item_list

Answer 1

如果道具是import scipy.io as sio client = storage.Client() bucket = client.get_bucket('bucket-id') matfile = sio.loadmat(buket_path + 'path/to/annotations.pkl') ，则必须绑定index。

index

Answer 2

将work_item_list作为prop传递给子组件，并在那里进行循环。

例如

在父母中

<WorkCard :workitem="work_item_list"></WorkCard>

在儿童中

<template>
    <div v-for="(obj,index) in workitem" v-bind:key="index">
        <div class="work-card mt-2 mb-2">
              <span>{{obj.work_title}}</span>
        </div>
        <div class="border border-info">{{index}}</div>
    </div>
</template>