I am working on a TypeScript component that utilizes recursion:
<template>
<div :style="{ paddingLeft: depth * 20 + 'px' }">
<h1>Level {{ depth }}</h1>
<div v-if="depth < 2">
<Recursive v-for="i in 3" :key="i" :depth="depth + 1"/>
</div>
</div>
</template>
<script lang="ts">
import * as Vue from "vue";
import { Component, Prop } from "vue-property-decorator";
@Component({
components: { Recursive }
})
class Recursive extends Vue {
@Prop({ required: true })
depth!: number;
}
export default Recursive;
</script>
Check out the demo: https://codesandbox.io/s/vue-typescript-recursive-12u3q?file=/src/components/Recursive.vue
During development, the recursion works without any issues.
However, after building the project, recursive imports are converted to the following strings:
<!--function(e,n,r,o){return ln(t,e,n,r,o,!true)}-->I am seeking advice on how to ensure the recursion functions properly after building the project.