vue.js 하나씩 토글 열고 닫기

template 태그 안에서 돌리는 v-for 값을 메서드에 쓸 수 있다는 사실을 오늘 알게 됨

<template>
    <div>
        <div v-for="(list, idx) in arr" :key="idx">
        <button @click="openToggle(list)" />
        <div v-show="list.isActive">{{list.title}}</div>
	</div>

<script>
export default {
	data: {
    	arr=[
          {
          	title: 'a',
           	desc: 'test1',
            isActive: false
          },
          {
          	title: 'b',
           	desc: 'test2',
            isActive: false
          }
        ]
    },
    methods: {
        openToggle(list) {
            list.isActive = !list.isActive;
        }
    }
};
</script>

위 예시 처럼 openToggle에 v-for 값을 받아올 수 있다.
이렇게 하면 2개의 title div중 선택한 값만 열고 닫을 수 있게 된다.

간단하게 풀 줄 알았는데 생각보다 너무 오래 걸렸다.