[Vue warn]: Avoid using non-primitiv... - 인프런

Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex

TodoList 컴포넌트의 할 일 완료 기능 구현

[Vue warn]: Avoid using non-primitive value as key, use string/number value instead.

작성

[Vue warn]: Avoid using non-primitive value as key, use string/number value instead.

이에러는 뭔가요?... index 어쩌고 에러나서 그대로 콘피그 생성해서 넣었더니 저거나와요

답변 1

지식공유자

안녕하세요 지영님, v-for 디렉티브 사용하실 때 v-bind:key에 무언가를 연결하신 것 같은데요. 문자열이랑 숫자만 해당 값에 들어갈 수 있게 변경하시면 됩니다. 아마 객체나 다른 데이터 타입이 들어가 있는 것 같아요 :)

localStorage를 setItem 할 때, (key, value)으로 설정해줄 때

두번째 파라미터가 기존에는 아래와 같았으나

localStorage.setItem(this.newTodoItem, this.newTodoItem);

강좌 영상중 아래와 같이 바꾸는 과정에서 발생한 것 같습니다.

localStorage.setItem(this.newTodoItem, JSON.stringify(obj));

다른 수강생 분들께서는 참고가 되셨으면 좋겠습니다.

해결방법은 아래와 같습니다.

<li class="shadow" v-for="(todoItem, index) in todoItems" v-bind:key="todoItem">

위에 v-bind:key="todoItem"을 "todoItem.item" 으로 설정하니 에러가 해결됐습니다.