I am facing a challenge with my component called Group, which has the ability to contain recursive components. Within this Group component, there is another component named ButtonsContainer. The ButtonsContainer component provides functions to focus on the first and last buttons. My goal is to obtain references to both the first group and the last group, including any nested groups. I attempted to achieve this using a recursive function, but unfortunately, it resulted in exceeding the maximum call stack size.
Displayed below is the code snippet for the Group component. I have excluded the ButtonsContainer component since it primarily displays buttons in a grid without any special functionalities.
Group Component:
<script setup lang="ts">
const props = defineProps<{
group: Group
}>();
const buttonsContainerRef = ref<InstanceType<typeof ButtonsContainer> | null>(null);
const firstGroupRef = ref<InstanceType<typeof Group> | null>(null);
const lastNestedGroupRef = ref<InstanceType<typeof Group> | null>(null);
function getLastButtonsContainerRef(): Ref<InstanceType<typeof ButtonsContainer> | null> | undefined {
if (props.group.groups.length > 0) {
// return getLastButtonsContainerRef(); // still does not work:(
getLastButtonsContainerRef();
} else {
return buttonsContainerRef;
}
}
</script>
<template>
<ul>
<li v-if="group.buttons.length > 0 && !props.group.collapsed">
<ButtonsContainer
:buttons="group.buttons"
ref="buttonsContainerRef"
/>
</li>
<li
v-if="group.groups.length > 0 && !props.group.collapsed"
v-for="nestedGroup in group.groups"
:key="nestedGroup.uuid"
>
<Group
:group="nestedGroup"
class="nested-group"
/>
</li>
</ul>
</template>
If you have any suggestions on how I can retrieve references to both the first and last group, along with any nested ones, please feel free to share your insights. Your assistance is greatly appreciated. Thank you!