how to bind on a source property in v-for

given this tutorial

as shown below in the code, i am trying to iterate through items array and display item.message
at run time, i receive the following error:

Elements in iteration expect to have 'v-bind:key' directives  vue/require-v-for-key

please let me know how can i bind on source property in v-for

code:

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

<script>

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

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

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

</script>

>Solution :

Read about :key in the Vue docs:
https://vuejs.org/guide/essentials/list.html#maintaining-state-with-key
To make your life easier just always provide :key for v-for by selecting some unique value in your objects in the list, in your case it seems message since you don’t have any id property:

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