Inflearn Community Q&A

좋은 강의 감사합니다!! map 적용 후부터 콘솔 창에

[Vue warn]: <transition-group> children must be keyed: <li>

이렇게 오류가 뜨는데 이유가 뭘까요...?

 

<template>

  <div>

    <transition-group name="list" tag="ul">

      <li

        v-for="(todoItem, index) in this.storedTodoItems"

        :key="todoItem.item"

        class="shadow"

      >

        <i

          class="checkBtn fas fa-check"

          v-bind:class="{ checkBtnCompleted: todoItem.completed }"

          @click="toggleComplete(todoItem, index)"

        ></i>

        <span v-bind:class="{ textCompleted: todoItem.completed }">

          {{ todoItem.item }}

        </span>

        <span class="removeBtn" @click="removeTodo({ todoItem, index })">

          <i class="fas fa-trash-alt"></i>

        </span>

      </li>

    </transition-group>

  </div>

</template>