I am facing an issue with two recursive components. The first component acts as a wrapper for the elements, while the second component represents the individual element.
Wrapper Component
<template>
<div class="filter-tree">
<filter-tree-item
v-for="item in items"
:key="item.id"
:deep="deep"
:item="item"
@on-interact="interact"
></filter-tree-item>
</div>
</template>
<script setup lang="ts"gt;
export interface Props {
items: Items[];
deep?: number;
}
const props = withDefaults(defineProps<Props>(), {
deep: 0
})
const interact = () => {
console.log(props.deep) // logs always 0
}
</script>
Item Component
<template>
<p @click="handle">{{ deep }}</p> <!--Shows correct deep-->
<filter-tree v-if="hasChildren" :items="item.children" :deep="deep + 1"></filter-tree>
</template>
<script setup lang="ts">
export interface Props {
item: Item;
deep?: number;
}
const props = withDefaults(defineProps<Props>(), {
deep: 0,
});
const emits = defineEmits(['on-interact'])
const handle = () => {
emits('on-interact')
}
</script>
While the deep prop displays correctly in the template, I face an issue when trying to access it within my script. Instead of getting the expected value of 2, which is passed down, I consistently receive the topmost value of 0.
What could possibly be causing this discrepancy? Any insights or solutions would be greatly appreciated.