[Vuejs]-V-for index not showing in component

by

3👍

pass the work_item_list as prop to the child component and do the looping there.

Eg

In Parent

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

In Child

<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>
👤Tony Tom

2👍

If your props is index then you have to bind 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>
👤User 28

Leave a comment