[Vue] Duplicate keys detected: { key }. This may cause an update error

작성일 | In

문제상황

Duplicate keys detected: { key }. This may cause an update error

문제확인

두 개의 for문의 :key가 idx이기에 0,1,2,..등으로 중복되어 해당 오류가 발생하였다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<b-form-group
  class="border rounded file-list"
  v-if="notice.files || originFiles"
>
  <div class="file-label" v-for="(file, idx) in originFiles" :key="idx">
    <div v-if="!file.isDelete">
       ()
      <b-icon
        icon="x"
        aria-hidden="true"
        @click="deleteFile(false, idx)"
      ></b-icon>
    </div>
  </div>
  <div class="file-label" v-for="(file, idx) in notice.files" :key="idx">
     ()
    <b-icon icon="x" aria-hidden="true" @click="deleteFile(true, idx)"></b-icon>
  </div>
</b-form-group>

문제해결

둘 중 하나의 for문의 key를 수정해주었다.

1
2
3
4
5
6
7
8
9
<div class="file-label" v-for="(file, idx) in originFiles" :key="idx"></div>

<!-- :key="idx"를 :key="`o-${idx}`"로 바꾸어주었다. -->

<div
  class="file-label"
  v-for="(file, idx) in originFiles"
  :key="`o-${idx}`"
></div>

소스코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<b-form-group
  class="border rounded file-list"
  v-if="notice.files || originFiles"
>
  <div class="file-label" v-for="(file, idx) in originFiles" :key="`o-${idx}`">
    <div v-if="!file.isDelete">
       ()
      <b-icon
        icon="x"
        aria-hidden="true"
        @click="deleteFile(false, idx)"
      ></b-icon>
    </div>
  </div>
  <div class="file-label" v-for="(file, idx) in notice.files" :key="idx">
     ()
    <b-icon icon="x" aria-hidden="true" @click="deleteFile(true, idx)"></b-icon>
  </div>
</b-form-group>

참고

https://github.com/hejianxian/vddl/issues/23