목록을 반복하고 항목 정체성을 유지합니다.
v-for는 배열이나 객체를 반복합니다. :key에는 DB id처럼 안정적인 고유값을 사용해 재정렬과 삭제 때 DOM과 컴포넌트 상태가 올바른 항목에 연결되게 합니다.
필터와 정렬은 원본을 직접 바꾸지 않는 computed에서 계산합니다.
index key는 정적인 표시 전용 목록 외에는 입력 상태 이동 문제를 만들 수 있습니다.
템플릿 렌더마다 Math.random key를 만들면 모든 항목이 다시 생성됩니다.
로컬 프로젝트에서 확인해보세요hours가 15 이상인 항목만 보여주는 computed를 추가하세요.
<script setup>
const courses = [
{ id: "vue", title: "Vue", hours: 20 },
{ id: "nuxt", title: "Nuxt", hours: 24 },
];
</script>
<template>
<main>
<ul>
<li v-for="course in courses" :key="course.id">
<b>{{ course.title }}</b> {{ course.hours }}시간
</li>
</ul>
</main>
</template>