如何在Vue的v-for中绑定源属性？解决key缺失报错

你遇到的报错是因为Vue的ESLint规则vue/require-v-for-key要求所有v-for循环的元素必须绑定唯一的key属性，这是为了让Vue能准确跟踪每个列表项的身份，优化DOM更新性能。

两种绑定key的方式： #

1. 使用数组索引作为key（适合静态、不会增删改的数组）
   修改template中的v-for代码：

   <template>
     <li v-for="(item, index) in items" :key="index">
       {{ item.message }}
     </li>
   </template>
   

   这里通过(item, index)获取循环的索引，把index绑定为key。

2. 使用列表项的唯一标识作为key（推荐用于动态数组，避免索引变化导致的渲染问题）
   如果你的列表项有唯一属性（比如id），优先用这个属性作为key。如果当前示例里的message都是唯一的，也可以直接用：

   <template>
     <li v-for="item in items" :key="item.message">
       {{ item.message }}
     </li>
   </template>
   

完整修改后的代码： #

<template>
  <li v-for="(item, index) in items" :key="index">
    {{ item.message }}
  </li>
</template>

<script>
export default {
  name: 'App',
}
</script>

<script setup>
import {ref} from 'vue' 

const items = ref([{ message: 'Foo' }, { message: 'Bar' }])
</script>

内容的提问来源于stack exchange，提问作者Amrmsmb