I am utilizing a Ref to preserve the current height of the active element. My goal now is to transfer this height to the subsequent element that gets clicked on.
<script lang="ts" setup>
import { ref, reactive } from "vue";
defineProps<{
content: Array<{ title: string; content: string }>;
}>();
const contentRefs = ref<HTMLDivElement | null>(null);
const isToggled = reactive<{ value: number | null }>({ value: null });
const handleClick = (index: number) => (isToggled.value = isToggled.value === index ? null : index);
</script>
<template>
<div v-for="(item, index) in content" class="accordion" :class="{ open: isToggled.value === index }" :key="index">
<div @click="() => handleClick(index)">{{ item.title }}</div>
<div ref="contentRefs" :style="{ minHeight: isToggled.value === index ? contentRefs?.scrollHeight : '0' }">{{ item.content }}</div>
</div>
</template>
My aim is to retrieve the current height of the active element using contentRefs?.scrollHeight. However, I am encountering an issue where my desired height is not being returned.