如何在 Vue.js 中获取 v-for 索引？

Posted 2023-02-22

【中文标题】如何在 Vue.js 中获取 v-for 索引？

【英文标题】：How to get the v-for index in Vue.js?

【发布时间】：2018-09-15 11:45:47

【问题描述】：

我有一个像下面这样的 Vue 组件：

<div v-for="item in items" :key="there I want get the for-loop index"  >

</div>

... 

data()
  items: [name:'a', name:'b'...]

在 vue.js 中执行 for 循环时如何获取索引？

【问题讨论】：

请记住，使用循环索引并不比完全省略键更好。理想的键选择是唯一标识数组/对象中每个项目的东西。

【参考方案1】：

声明一个index 变量：

<div v-for="(item, index) in items" :key="item.name">

</div>

演示：

new Vue(
  el: '#app',
  data: 
    items: [name: 'a', name: 'b']
  
)

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <div v-for="(item, index) in items" :key="item.name">
     index :  item.name 
  </div>
</div>

官方文档部分 - Mapping an Array to Elements with v-for（强调我的）：

在v-for 块中，我们可以完全访问父范围属性。 v-for 还支持当前项目的索引的可选第二个参数。

【讨论】：

Tom Fenech 的comment 非常真实和重要。 :key="index" 并没有太大帮助。查看rimdev.io/the-v-for-key 了解原因。

@AdamZerner 好提示。前置确实与索引作为键不一致。我将更新示例

@acdcjunior 你能解释一下这部分吗？ “在 v-for 块中，我们可以完全访问父范围属性”这里的父范围属性是什么？感谢您的宝贵时间。

例子中的@KickButtowski，parent是整个app，只有items。如果它有任何其他属性，这些属性将可用。另一个例子是如果在另一个v-for 中有一个v-for。在这种情况下，内部v-for 可以访问在外部v-for（其父范围）中声明的变量。

【参考方案2】：

你可以使用`$index`来获取v-for的索引。

<div v-for="item in items" :key="`$index`"  >

</div>

和其他方法：

<div v-for="(item, index) in items" :key="index"  >

</div>

【讨论】：

不幸的是，简写 $index 在 Vue 2.x 中被删除了

使用索引作为键是一种反模式

【参考方案3】：

创建一个新方法：

methods: 
    incrementIndex(key) 
        return key + 1;
    ,
,

如果数组键被编号，从零开始，如items[0]、items[1]、etc..，则可以使用数组的键：

<div v-for="(item, key) in items" :key="key">
     incrementIndex(key) 
</div>

但是如果数组的键是typeof String 那么你可以这样做：

<div v-for="(item, key, index) in items" :key="key">
     incrementIndex(index) 
</div>

第二个版本使用来自v-for 循环的counter。

【参考方案4】：

更新答案：： 您将数组索引为："["aaaa","bbbbb"]" 然后是这个脚本。

new Vue(
  el: '#app',
  data: 
    items: ["aaaa","bbbbb"]
  
)

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <div v-for="(item, index) in items" :key="index">
     index  :  item 
  </div>
</div>