在 Vue SFC 中获取循环键

Question

给定以下循环组件：

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

如何在 MyComponent 中获取 key 的值，显然 key 是一个保留字，因此它不能作为 prop 使用。

Answer 1

将其作为声明的道具传递（例如：index）：

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

MyComponent.vue:

export default {
  props: {
    index: Number
  }
}

旁注：建议您 key 使用唯一标识符（例如：id）列出列表，而不是基于它们在列表中的位置。例如，如果任何项目被替换或更新，Vue 可能不会 re-render，因为项目在数组中的位置没有改变，即使项目本身已经改变。

这就是当您按索引键控项目时列表转换不起作用的原因。

但是，如果您的项目不改变位置 and/or 则不会更新，index 因为 key 会完成这项工作。

Get Loop Key Inside Vue SFC