v-for 반복해서 렌더링하기

용법부터 바로 알아보자

	const items = reactive([
    	{ id: 1, message: 'kim' },
        { id: 2, message: 'joo' },
        { id: 3, message: 'seo' },
        { id: 4, message: 'lee' }
    ]);
    
    <li v-for="(item, index) in items" :key="item.id">{{ item.message }}</li>

렌더링을 해야할때는, :key속성에 고유한 값을 꼭 넣어줘야한다 (vue 2.2.0이후부터 필수)

객체를 렌더링할 수도 있다.

	const myObject = reactive({
    	title: '제목입니다.',
        author: '김김김',
        createdAt: '2024-02-01'
    });
    
    <li v-for="(value, key, index) in myObject" :key="key">
    	{{value}} - {{ key }} - {{ index }}
    </li>

주의 v-for와 v-if를 함께쓰는 것은 권장하지 않는다.

	<ul>
    	<li 
        v-if="item.id % 2 === 0" 	
        v-for="(item, index) in items" :key="item.id">
        </li>
    </ul>

이렇게 쓰지 말라는 것! 그러면 어떻게 써야할까??

1) template을 활용하자

	<ul>
    	<template v-for="(item, index) in items" :key="item.id">
        	<li v-if="item.id % 2 === 0">{{ item.message }}</li>
        </template>
    </ul>

2) computed 속성으로 필터를 한다음에 바로 v-for로 렌더링하자

	<template>
    	<ul>	
        	<li v-for="(item, index) in evenItems" :key="item">
            	{{ item }}
            </li>
        </ul>
    </template>

	export default {
    	setup() {
        	const items = reactive([
            	{ id: 1, message: 'java' },
                { id: 2, message: 'html' },
                { id: 3, message: 'css' },
                { id: 4, message: 'javascript' },
            ]);
            
            const eveItems = computed(() => items.filter(item => item.id % 2 === 0));
        }
    }