Web Front-end/Vue.js
[Vue.js] v-for 리스트 렌더링
ji.o.n.e
2020. 10. 28. 11:56
리스트 렌더링 — Vue.js
Vue.js - 프로그레시브 자바스크립트 프레임워크
kr.vuejs.org
- 코드 구현
- v-for의 두번째 인자는 index이다.
- Vue에서 개별 DOM 노드들을 추적하고 기존 엘리먼트를 재사용, 재정렬하기 위해서 v-for의 각 항목들에 고유한 key 속성을 제공해야 함.
- 그러나 key 속성을 index로 주는 것은 올바르지 않다.
- key는 고유한 값을 가져야하는데 index로 key를 지정할 경우 리스트 원소의 삭제나 추가 있을 경우에 값이 바뀌게 된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Study</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div>
{{people[0].name}} {{people[0].age}}
</div>
<div>
{{people[1].name}} {{people[1].age}}
</div>
<div>
{{people[2].name}} {{people[2].age}}
</div>
<hr>
<div v-for="(person,index) in people" :key="id">
{{person.name}} {{person.age}} {{index}}
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
people: [
{ id: 1, name: 'a', age: 20 },
{ id: 2, name: 'b', age: 21 },
{ id: 3, name: 'c', age: 22 },
{ id: 4, name: 'd', age: 23 }
]
},
})
</script>
</body>
</html>
- 실행 화면
