accordion simple logic - Vue3 / Nuxt3 / Vuetify

accordeon.vue

<!-- 
Simple accodion

Vuetify: https://vuetifyjs.com/en/components/expansion-panels/

note
VExpandTransition is part of Vuetify, and will animate elements, in this case: that do have v-if or v-show change

This can be replaced with Vue maybe (but animating height to auto is annoying, because it needs extra css):
  `transition(name="expand" mode="out-in")` - https://vuejs.org/guide/built-ins/transition

-->

<template lang="pug">

article.card
    header(@click="cards[1] = !cards[1]" style="background-image: url('/assets/bg1.jpg');")
        span Topic 1

    VExpandTransition
        section(v-if="cards[1]")
            p lorem ipsum

article.card
    header(@click="cards[2] = !cards[2]" style="background-image: url('/assets/bg2.jpg');")
        span Topic 2

    VExpandTransition
        section(v-if="cards[2]")
            p lorem ipsum
            
// ...
</template>


<script lang="ts">
type objArr = { [key:number]: boolean; };

export default defineComponent({
    data() {
        return {
            cards: {} as objArr,
        };
    },

    methods: {
        // use this as click handler instead, if you want the other elements to close
        open(elNum: number) {
            Object.keys(this.opened).forEach(num => this.opened[+num] = +num !== elNum ? false : this.opened[+num]);
            this.opened[elNum] = !this.opened[elNum];
        },
    }

});
</script>

<style scoped lang="less">
.card {
    header {
        background-position: center;
        background-size: cover;
    }
}
</style>