how to get key, value, and index in v-for

Question

I am using v-for to loop through an object, I need to access the key, the value, and the index. I've seen many ways to access two of them, that's easy, but can't find how to access all three.

I found a workaround but it's horribly messy and pretty unreadable.

<div v-for="idx in Object.keys(PointsAvailable[0]).length" :key="idx">
  <PointSquare
    :Value="Object.keys(PointsAvailable[0])[idx-1]"
    :Availability="PointsAvailable[0][Object.keys(PointsAvailable[0])[idx-1]]"
    :reference="idx-1">
  </PointSquare>
</div>

Is there a better way of doing this?

Answer 1

You can also try v-for="(value, key, index) in PointsAvailable" and reference them accordingly. check this example from the Vue documentation

<div v-for="(value, name, index) in object">

{{ index }}. {{ name }}: {{ value }}

https://v2.vuejs.org/v2/guide/list.html

Answer 2

You can use Object.entries(obj) to get the key and value of the object and to get the index you can define the for loop as:

<div v-for="(value, index) in Object.entries(points)" :key="index">
    {{ value[0] }} {{ value[1] }} {{ index }}
</div>

value[0] is the key, value[1] is the value and index

Answer 3

v-for="([key, value], index) in Object.entries(Obj)"

This should work.

Answer 4

v-for="([key, value]) in Object.entries(Obj)"

this should work (original)