如何在v-for中获取键、值和索引

Question

我正在使用 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>

有更好的方法吗？

Answer 1

您也可以尝试v-for="(value, key, index) in PointsAvailable"并相应地参考它们。从 Vue 文档中查看此示例

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

{{ 指数 }}。{{名称}}：{{值}}

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

Answer 2

您可以使用它Object.entries(obj)来获取对象的键和值，并获取索引，您可以将 for 循环定义为：

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

value[0] 是键，value[1] 是值和索引