J'ai un composant qui collecte les données d'une API. Les données renvoyées par l'API sont un tableau contenant les détails. L'une des valeurs du tableau est le type de composant qui doit être restitué, toutes les autres données sont transmises au composant. J'essaie de restituer le composant correct en fonction de la valeur ramenée de la base de données, mais malheureusement cela ne fonctionne pas. Je suis nouveau sur Vue mais cela fonctionne dans vue2 mais j'espère que cela fonctionnera dans Vue 3 en utilisant l'API de composition.

Voici le code du composant que je souhaite remplacer :

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

Lorsqu'il est visualisé dans un navigateur, voici ce qui est réellement affiché, mais sans utiliser le composant SelectInput :

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

SelectInput est un composant de mon répertoire et si je code en dur la valeur :is, cela fonctionne comme prévu comme ceci :

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

Mon composant complet appelant le composant component et échangeant le composant :

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