vue3 js-Komponente: Komponente nicht aktualisiert

Question

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>

Answer 1

如果您的组件文件名等于问题对象上的类型说明符，那么您可以动态导入它们以保存一些代码行。

这也会带来更好的可扩展性，因为如果您创建更多类型，您不必再接触此组件。

Answer 2

发现，因为我使用的是脚本设置，所以组件未命名，因此组件组件不知道要渲染哪个组件。

因此，我创建了一个包含组件的对象以及对该组件的引用：

const components = {
        'SelectInput': SelectInput,
        'TextareaInput': TextareaInput
    };

另一个函数接受我想要显示的组件并将其链接到实际组件：

const component_type = (type) => components[type];

然后在模板中我调用该函数并呈现正确的组件：

完整的固定代码：

不太确定这是否是正确的方法，但它现在呈现正确的组件。