CODEWITHSUNDEEP
vue.jsv-for
aidan byrne
aidan byrne

Reputation: 636

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

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?

Upvotes: 32

Views: 70905

Answers (4)

pxeba
pxeba

Reputation: 1776

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

this should work (original)

Upvotes: 2

Chandara Yi
Chandara Yi

Reputation: 15

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

This should work.

Upvotes: -1

Fahd Arafat
Fahd Arafat

Reputation: 955

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

Upvotes: 74

Yash Maheshwari
Yash Maheshwari

Reputation: 2412

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

Upvotes: 10

Related Questions