Ich habe eine Komponente, die Daten von einer API sammelt. Die von der API zurückgegebenen Daten sind ein Array mit den Details. Einer der Werte im Array ist der Typ der Komponente, die gerendert werden soll, alle anderen Daten werden an die Komponente übergeben. Ich versuche, die richtige Komponente basierend auf dem aus der Datenbank zurückgegebenen Wert zu rendern, aber leider funktioniert es nicht. Ich bin neu bei Vue, aber es funktioniert in Vue2, hoffe aber, dass es in Vue 3 mit der Kompositions-API funktioniert.

Dies ist der Komponentencode, den ich ersetzen möchte:

<component :is="question.type" :propdata="question" />

Bei der Anzeige in einem Browser wird Folgendes tatsächlich angezeigt, jedoch ohne Verwendung der SelectInput-Komponente:

<selectinput :propdata="question"></selectinput>

SelectInput ist eine Komponente meines Verzeichnisses und wenn ich den :is-Wert fest codiere, funktioniert es wie erwartet wie folgt:

<component :is="SelectInput" propdata="question" />

Meine komplette Komponente ruft die component-Komponente auf und tauscht die Komponente aus:

<template>
    <div class="item-group section-wrap">
        <div v-bind:key="question.guid" class='component-wrap'>
            <div class="component-container">
                <!-- working -->
                <component :is="SelectInput" :propData="question" />
                <!-- not working -->
                <component v-bind:is="question.type" :propData="question" />
            </div>
        </div>
    </div>
</template>

<script setup>

    import { defineProps, toRefs } from 'vue';

    import SelectInput from "./SelectInput";
    import TextareaInput from "./TextareaInput";

    const props = defineProps({
        question: Object,
    });

    const { question } = toRefs(props);

</script>