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

Posted 2023-02-16

【中文标题】如何在 v-for 中获取键、值和索引

【英文标题】：how to get key, value and index in v-for

【发布时间】：2021-04-15 16:44:26

【问题描述】：

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

有更好的方法吗？

【参考方案1】：

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

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

索引 。 名称：值

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

【参考方案2】：

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

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

value[0]是key，value[1]是value和index

【讨论】：

您希望能够使用v-for=(key, value) in Object.entries(points)，但这并不像预期的那样工作。这对中的第一项实际上是一个列表，就像答案帖子所说的那样。