v-для индекса не отображается в компоненте

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

Если ваш реквизит index, то вам нужно связать index.

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

Answer 2

передать work_item_list в качестве реквизита дочернему компоненту и выполнить цикл там.

Например

В родительском

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