Composant vue3 js : composant non mis à jour

Question

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>

Answer 1

Si les noms de fichiers de vos composants sont identiques aux spécificateurs de type de l'objet en question, vous pouvez les importer dynamiquement pour enregistrer certaines lignes de code.

Cela conduit également à une meilleure évolutivité car si vous créez plus de types, vous n'avez plus besoin de toucher à ce composant.

sssccc

Answer 2

J'ai découvert que parce que j'utilise le composant 脚本设置，所以组件未命名，因此组件, je ne sais pas quel composant rendre.

J'ai donc créé un objet contenant le composant et une référence au composant :

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

Une autre fonction qui prend le composant que je souhaite afficher et le relie au composant réel :

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

Ensuite, dans le modèle, j'appelle la fonction et restitue le composant correct :

Code fixe complet :

sssccc

Je ne sais pas vraiment si c'est la bonne approche, mais elle restitue maintenant le bon composant.