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

Vue3 튜토리얼 중 다음과 같이 에러가 나타남.

코드:

<template>
<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>
</template>
<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'TestVue',
  data () {
    return {
      todos: [
        { text: 'JavaScript 배우기' },
        { text: 'Vue 배우기' },
        { text: '무언가 멋진 것을 만들기' }
      ]
    }
  }
})
</script>

에러:

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

해결:

v-for를 사용할 시, Key 값이 요구됨

아래와 같이 'v-for'문에 'key'값을 삽입(이 코드에선 i가 key값)

<template>
<div id="app-4">
 <ol>
   <li v-for='(todo, i) in todos' :key="i">
     {{ todo.text }} - v-for key 값은 {{ i }}
   </li>
 </ol>
</div>
</template>
<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'TestVue',
  data () {
    return {
      todos: [
        { text: 'JavaScript 배우기' },
        { text: 'Vue 배우기' },
        { text: '무언가 멋진 것을 만들기' }
      ]
    }
  }
})
</script>