Vue typescript recursive component

Question

I have a simple typescript component with 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>

Demo: https://codesandbox.io/s/vue-typescript-recursive-12u3q?file=/src/components/Recursive.vue

It works fine in development mode.

But once I make a build - recursive imports will be compiled into these kind of strings:

 instead of html.

What should I do to make the recursion work properly?

Dmitry · Accepted Answer · 2020-07-08 12:22:34Z

5

I forgot to set the name of the component in @Component decorator:

@Component({
  name: 'Recursive',
  components: { Recursive }
})

This code will be working both in development and compiled modes.

answered Jul 8, 2020 at 12:22

Dmitry

7411 gold badge7 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Thomas Raffelsieper Over a year ago

I love you! Strange thing, as you don't get any hint what is wrong. And I still don't get why it is working in dev mode...

Dmitry Over a year ago

Glad it helped ❤️ Have no idea why is it still working in dev mode 🤷‍♂️

skofgar Over a year ago

Setting the name solved it for me as well. However, for me defining the components: { Recursive } section causes an error, so I just removed it. Some useful links I came across: github.com/nuxt/nuxt.js/issues/6385#issuecomment-748076310 and medium.com/js-dojo/… (I know the second link is for non-typescript, but it might still be useful for context)

Collectives™ on Stack Overflow

Vue typescript recursive component

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related