Блог

Я использую v-for для перебора объекта, мне нужно получить доступ к ключу, значению и индексу. Я видел много способов получить доступ к двум из них, это просто, но не могу найти, как получить доступ ко всем трем.

Я нашел обходной путь, но он ужасно грязный и довольно нечитаемый.

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

Есть ли лучший способ сделать это?

Вы также можете попробовать v-for="(value, key, index) in PointsAvailable" и ссылаться на них соответствующим образом. проверьте этот пример из документации Vue

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

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

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

Вы можете использовать Object.entries(obj) для получения ключа и значения объекта, а для получения индекса вы можете определить цикл for как:

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

значение [0] — это ключ, значение [1] — это значение и индекс