Lint의 잘못으로 욕을 먹었지만 뒷면을 살펴보면 디스플레이 자체가 좋다는 것을 알 수 있다

data

데이터가 이럴 때.

  data () {
    return {
      posts: [
        { id: 1, title: 'My journey with Vue' },
        { id: 2, title: 'Blogging with Vue' },
        { id: 3, title: 'Why Vue is so fun' }
      ]
    }

NG

<li v-for="post in posts">
  {{ post.title }}
</li>

OK

<li v-for="post in posts" :key="post.id">
  {{ post.title }}
</li>

OK ...?

bind의 값은 특별히 v-for에서 표시하는 것이 아니다
존재하지 않는 키를 지정해도 동작합니다. lint에서 욕을 먹지 않습니다.

<li v-for="post in posts" :key="post.xxx">
  {{ post.title }}
</li>

왠지 모르다

단지 표시일 뿐이라면 우선 bind 지정이 없어도 문제없지만, 삭제할 때 유일하게 요소를 확정하기 위한 것인가
[철저 해설] 이거 보면 vue.js의 v-for의 키 동작

Code

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <ul>
      <li v-for="post in posts">
        {{ post.id }} {{ post.title }}
      </li>
    </ul>
  </div>
</template>

<script>

export default {
  name: 'App',
  data () {
    return {
      posts: [
        { id: 1, title: 'My journey with Vue' },
        { id: 2, title: 'Blogging with Vue' },
        { id: 3, title: 'Why Vue is so fun' }
      ]
    }
  }
}
</script>

Original by Github issue