[Vue.js] v-for와 v-if를 함께 쓰고 싶을 때

Vue에서 코딩을 하다보면 html 영역에서 v-for나 v-if 등 디렉티브를 사용하는 일이 빈번한데 동일한 태그에 v-for와 v-if를 동시에 사용하면 에러가 발생하는 것을 볼 수 있다.

이럴때 어떤식으로 에러를 해결할 수 있는지 알아보자.

<template>
	<div>
		<tbody>
			<tr v-for="(item, idx) in sampleArr" :key="idx" >
				<td></td>
				<td></td>
			</tr>
		</tbody>
	</div>
</template>

<script>
export default {
	data(){
		return {
			sampleArr = [
				{name : "짱구",age : "5"},
				{name : "짱아",age : "2"},
				{name : "철수",age : "5"}
			]
		}
	}
}
</script>

위와 같이 샘플코드가 있다. 여기서 나이가 5살인 데이터만 출력하고 싶을 땐 어떻게 해야할까? 대충 생각해 보면 아래와 비슷한 형식으로 코딩을 할 수 있다. 하지만 sample1의 경우 v-for와 v-if는 함께 사용할 수 없다는 에러가 발생하며 sample2의 경우 모든 라인에 v-if를 사용해야하는 번거로움이 있다. 이럴때 사용하는것이

//sample 1
<tr v-for="(item, idx) in sampleArr" :key="idx" v-if=item.age == 5">
	<td></td>
	<td></td>
</tr>

//sample 2
<tr v-for="(item, idx) in sampleArr" :key="idx">
	<td v-if="item.age == 5"></td>
	<td v-if="item.age == 5"></td>
</tr>