Loop를 이용한 List Rendering
Loof 즉 특정 component를 반복하게 되면 화면을 쉽게 구성할 수 있습니다.
데이터를 준비
<template>
<div class="content">
<span>Content Component</span>
<ChartApp v-for="(item, idx) in appInfos" :appInfo="item" :data-index="idx"></ChartApp>
</div>
</template>
<script>
export default {
name: "Content",
components: {ChartApp},
data() {
return {
appInfos: [
{
width: 200,
height: 200,
title: "App1",
top: 0,
left: 0
},
{
width: 200,
height: 200,
title: "App1",
top: 200,
left: 200
},
{
width: 400,
height: 400,
title: "App1",
top: 600,
left: 1000
},
{
width: 400,
height: 400,
title: "App1",
top: 1000,
left: 600
}
]
};
}
}
</script>Content component에 appInfo라는 배열을 props로 사요하고자 하는 하위 compoennt로 보냅니다.
v-for
Vue에서는 v-for라는 디렉티브를 이용하여 리스트를 렌더링할 수 있습니다.
<div v-for="(item, idx) in iterator" :key="idx"></div>v-for를 통해 리스트 렌더링 되는 component는 항상 key라는 props 값의 전달이 필요합니다. 왜냐하면 Vue는 Vitrual DOM을 사용하는데 리스트 component에서 변경된 부분을 감지할 때 key 값을 이용해서 리스트 렌더링을 하기 때문입니다.
🎢