Saya mempunyai komponen yang mengumpul data daripada API. Data yang dikembalikan daripada API ialah tatasusunan yang mengandungi butiran. Salah satu nilai dalam tatasusunan ialah jenis komponen yang perlu diberikan, semua data lain dihantar ke komponen. Saya cuba memberikan komponen yang betul berdasarkan nilai yang dibawa balik dari pangkalan data, tetapi malangnya ia tidak berfungsi. Saya baru menggunakan Vue tetapi ia berfungsi dalam vue2 tetapi berharap ia berfungsi dalam Vue 3 menggunakan API komposisi.

Ini adalah kod komponen yang ingin saya ganti:

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

Apabila dilihat dalam penyemak imbas, inilah yang sebenarnya dipaparkan, tetapi tanpa menggunakan komponen SelectInput:

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

SelectInput ialah komponen direktori saya dan jika saya mengekod keras nilai :is ia berfungsi seperti yang diharapkan seperti ini:

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

Komponen lengkap saya memanggil komponen component dan menukar komponen:

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