I'm facing an issue where my recursive component is not nesting itself properly.
The problem arises when I try to use the Recursive component inside another Recursive component. Although the root is correctly inserted into the Recursive component from another component, there are no errors in the console but the nesting doesn't happen as expected.
Here's what it looks like in the DOM:
<div>
<!--function(t,n,r,i){return et(e,t,n,r,i,!0)}-->
</div>
<div>
<!--function(t,n,r,i){return et(e,t,n,r,i,!0)}-->
</div>
<template>
<div>
{{element.Id}}
<div v-for="child in element.Childs.map(x => document[x])">
Child: [{{child}}] <-- shows fine
<Recursive :element="child"/>
</div>
</div>
</template>
<script src="./recursive.ts"></script>
import Vue from "vue";
import { Component } from 'vue-property-decorator';
import { mapState } from 'vuex';
@Component({
props: ['element'],
computed: {
...mapState(['document']),
},
components: {
Recursive: require('./recursive.vue.html')
}
})
export default class RecursiveComponent extends Vue {
}
If anyone has any insights or solutions on what might be causing this issue, please share!