Vue.jsで複数のトグルを作成する方法（compositionApi,TypeScript）

Vue.jsでトグルを作るのは簡単です。

ただ複数のトグルとなると話は変わってきます。

考え方から書くと配列を作ってその値を判断して閉じる開くをスイッチします。

template

<ul>
<li v-for="(item, itemIndex) in items" :key="itemIndex">
<button type="button"
@click="toggle(itemIndex)"
>
開く
</button>
<div :class="{ 'is-close': toggleList[itemIndex] }">
開閉テキスト
</div>

TypeScript

const toggleList = ref<ToggleList[]>([isClose: false, isClose: false, isClose: false])
const toggle = (index: number) => {
    toggleList[index].isClose = !toggleList[index].isClose
}
return {
    toggleList,
    toggle,
}

scss

.is-close {
  display: none;
}