vue3 js 元件：元件未更新

Question

我有一個從 API 收集資料的元件。從 API 傳回的資料是一個包含詳細資訊的陣列。陣列中的值之一是應呈現的元件的類型，所有其他資料都傳遞給元件。 我試圖根據從資料庫帶回的值呈現正確的元件，但遺憾的是它不起作用。 我是 Vue 新手，但它可以在 vue2 中工作，但希望它可以使用組合 API 在 Vue 3 中工作。

這是我要替換的元件程式碼：

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

在瀏覽器中查看時，這是實際顯示的內容，但不使用 SelectInput 元件：

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

SelectInput 是我的目錄的一個元件，如果我對 :is 值進行硬編碼，它就會按預期工作，如下所示：

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

我的完整元件呼叫 component 元件並交換元件：

<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];

然後在模板中我呼叫該函數並呈現正確的元件：

#完整的固定程式碼：

不太確定這是否是正確的方法，但它現在呈現正確的元件。