[ Reference ]
https://vuejs.org/guide/essentials/list.html
List Rendering | Vue.js
vuejs.org
1. v-for
** v-for ** 디렉티브는 배열에서 item들을 렌더링할 때 사용할 수 있다. ** v-for ** 디렉티브는 ** item in items ** 라는특별한 구문을 필요로 한다. 여기서 items 는 array 를 의미하고 item 은 각 array 의 요소 별칭이다.
const items = ref([{ message: 'Foo' }, { message: 'Bar' }])
<li v-for="item in items">
{{ item.message }}
</li>
** v-for ** 는 상위 범위 속성에 모두 접근할 수 있고, 내부에서 만들 수 있는 두 번째 별칭은 index 값이다. (* v-for 는 아무래도 배열의 메소드, forEach 등과 유사하게 작동하는 것 같다.)
const parentMessage = ref('Parent')
const items = ref([{ message: 'Foo' }, { message: 'Bar' }])<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
2. v-for with an Object
** v-for ** 는 객체도 반복문으로 돌릴 수 있도록 도와준다.
const myObject = reactive({
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
})<li v-for="(value, key, index) in myObject">
{{ index }}. {{ key }}: {{ value }}
</li>
여기서는 첫 번째 인자가 value 의 별칭이 되고, 두 번째 인자가 key 의 별칭이 된다. 세 번째 인자는 index 값이다. 객체는 배열과 다르게 iterable 하지는 않지만 ** Object.keys( ) ** 로 돌렸을 때의 순서를 기반으로 돌릴 수 있도록 해준다. 한계점은 아무래도 일관성이 100% 보장되지 않다는 점이다.
3. v-for 기타 정보
먼저, ** v-for ** 는 <template> 에서도 사용이 가능하다.
v-for 와 v-if 함께 사용하기
두 번째로, v-for 와 v-if 는 동시에 사용이 가능하다. 하지만 암시적 우선 순위 때문에 v-if 와 v-for 를 동일한 요소에서 사용하지 않는 것을 권장한다. 암시적 우선 순위란 v-if 가 v-for 보다 우선순위가 높다는 것을 의미한다. 즉, v-if 조건이 v-for 범위의 변수에 접근할 수 없다. (* v-for 에서 사용하는 변수를 이용해서 v-if 로 조건을 걸 수 없다는 의미) 차라리 <template> 태그에 v-for 를 돌리고, li 나 div 등 실제 태그에 v-if 문을 걸어주는 것이 좋다.
<li v-for="todo in todos" v-if="!todo.isComplete">
{{ todo.name }}
</li>이걸 아래와 같이 변경해야 한다.
<template v-for="todo in todos">
<li v-if="!todo.isComplete">
{{ todo.name }}
</li>
</template>
key 값 설정하기
v-for 를 돌릴 때는 key 값을 반드시 부여해줘야 한다. vue 동작 원리에 의해 데이터 항목의 순서가 변경되면 노드의 key 값을 추적해서 기존의 요소를 재사용하며 순서를 변경할 수 있도록 한다. key 값이 있고 없고의 차이는 효율적인 측면에서 두드러지게 나타나므로 v-for 로 돌렸을 때는 key 값을 줘야만 한다. (* 마치 리액트에서 key 값을 주는 것처럼)
컴포넌트에서 v-for 사용하기
컴포넌트에서도 ** v-for ** 사용이 가능하다. 마찬가지로 key 값은 제공해야 한다. 다만, ** v-for ** 를 통해서 얻을 수 있는 데이터들은 props 로 전달해줘야 한다.
<my-component
v-for="(item, index) in items"
:item="item"
:index="index"
:key="item.id"
></my-component>