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

k7fdbhmy  于 2022-12-23  发布在  Vue.js
关注(0)|答案(2)|浏览(341)

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

有没有更好的办法?

nhhxz33t

nhhxz33t1#

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

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

{{索引}}. {{名称}}:{{值}}
https://v2.vuejs.org/v2/guide/list.html

l3zydbqr

l3zydbqr2#

你可以使用Object.entries(obj)来获取对象的键和值,要获取索引,你可以将for循环定义为:

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

值[0]是键,值[1]是值和索引

相关问题