• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

Elements in iteration expect to have 'v-bind:key' directives. 에러 발샐 질문

21.05.14 16:03 작성 조회수 399

1

<template>
<div>
<div v-for="user in users">{{ user.title }}</div>
</div>
</template>

<script>
import axios from 'axios';

export default {
data() {
return {
users: []
}
},
created() {
var vm = this;
axios.get('https://api.hnpwa.com/v0/news/1.json')
// es5 문법
.then(function(response){
console.log(response);
vm.users = response.data;
})
.catch(function(error){
console.log(error);
})
// es6 문법
// .then(response => vm.users = response.data)
// .catch()
},
}
코드를 이렇게 작성했는데.. <div v-for="user in users">{{ user.title }}</div> 부근에서 에러가 발생합니다.
에러 내용은 Elements in iteration expect to have 'v-bind:key' directives. 라는 에러가 발생하는데
어떻게 해결해야 하나요 ?

답변 2

·

답변을 작성해보세요.

2

이종수님의 프로필

이종수

2021.05.15

<div v-for="(user, index) in users" :key="index"></div>

이렇게 한번 해보세요 :)

0

안녕하세요 Bino님, v-for 디렉티브를 사용할 때는 v-bind:key를 꼭 지정해 주어야 합니다. 강의 뒤쪽에 아마 안내가 될 거에요 :) 종수님 대신 답변해 주셔서 감사해요!