I am currently working on a dynamic form that is generated by a DataTypeObject (dto). I have encountered an issue with a warning message while creating recursive components. This warning points to a list of components with the same type as their parent:
vue.runtime.esm.js?2b0e:619 [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
Below are snippets of the code:
The first snippet contains , which determines the type of component based on dto.type and displays the corresponding component:
<template>
<div class="field">
<NumberInputComponent
v-if="dto.type == 'NumberInput'"
v-bind:dto="dto"
></NumberInputComponent>
...
<FieldGroupComponent
v-if="dto.type == 'FieldGroup'"
v-bind:dto="dto"
></FieldGroupComponent>
...
<TextFieldComponent
v-if="dto.type == 'TextField'"
v-bind:dto="dto"
></TextFieldComponent>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";
import NumberInputComponent from "./NumberInput/NumberInput.vue";
import TextFieldComponent from "./TextField/TextField.vue";
...
import FieldGroupComponent from "./FieldGroup/FieldGroup.vue";
import { Field } from "./Field.dto";
@Component({
name: 'FieldComponent',
components: {
NumberInputComponent,
TextFieldComponent,
...
FieldGroupComponent
},
})
export default class FieldComponent extends Vue {
@Prop() private dto!: Field;
...
}
</script>
The second snippet is for grouping other fields inside a logical group:
<template>
<div class="field-group">
<FieldComponent
v-for="(field, index) in dto.fields"
:key="index"
v-bind:dto="field"
></FieldComponent>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Emit } from "vue-property-decorator";
import { FieldGroup } from "./FieldGroup.dto";
import FieldComponent from "../Field.vue";
@Component({
name: "FieldGroupComponent",
components: {
FieldComponent,
},
})
export default class FieldGroupComponent extends Vue {
@Prop() public dto!: FieldGroup;
}
</script>
After saving a change, if I do not reload the page, the child fields are visible. However, after reloading, they disappear. The error goes away when I comment out the inside the FieldGroup component.
I tried to recreate this recursion error but found that it worked fine in another recursion without setting the name property.
Thank you to everyone who is trying to help us!