Trying to implement an accordion component in Vue 3, but encountering a strange comparison issue.
I'm attempting to execute a function within the accordionitem - specifically the toggle operation. However, despite numerous attempts, I am unable to modify the props value. What could be causing this issue?
My goal is to have multiple toggles when the toggle function is clicked. If not, I want to display only one at a time. There is an example provided in the link below, but I cannot achieve this with Vue 3.
faq.vue
<template>
<accordion id="hello" :content="exampleData1"></accordion>
</template>
<script setup>
import Accordion from "@/components/Accordion.vue";
const exampleData1 = [
{
id: 1,
active: false,
title: 'Crushing Spirits',
details: `
<p>You can crush me but you can't crush my spirit! Are you crazy? I can't swallow that. Who's brave enough to fly into something we all keep calling a death sphere? It doesn't look so shiny to me.</p>
`
},
{
id: 2,
active: false,
title: 'Soundtracks',
details: `
<p>Ah, the 'Breakfast Club' soundtrack! I can't wait til I'm old enough to feel ways about stuff!</p>
`
},
{
id: 3,
active: false,
title: `The Letter Shaped Like a Man Wearing a Hat`,
details: `<p>And then the battle's not so bad? You'll have all the Slurm you can drink when you're partying with Slurms McKenzie! Say it in Russian!</p>
`
}
]
</script>
AccordionItem.vue
<template>
<dl class="accordion box" role="presentation">
</template>
<script setup>
import AccordionItem from "@/components/AccordionItem.vue";
const props = defineProps({
content: {type: Array, required: true},
id: {type: String, required: false}
})
</script>
AccordionItem.vue
<template>
<div :id="groupId + '-' + item.id" class="accordion-item" :class="{'is-active': item.active}">
<dt class="accordion-item-title">
<button @click="toggle" class="accordion-item-trigger">em>Togglegt;
</button>
</dt>
{{ item.active }}
<transition
name="accordion-item">
</transition>
</div>
</template>
<script setup>
const props = defineProps({
item: {type: Object, required: true},
})
function toggle(event) {
props.item.active = !props.item.active
}
function startTransition(el) {
el.style.height = el.scrollHeight + 'px'
}
function endTransition(el) {
el.style.height = ''
}
</script>