vue.js : créer un composant à partir d'une chaîne

vue.js : créer un composant à partir d'une chaîne

J'ai deux composants nommés composant-1 et composant-2, ainsi que ce code vue.js :

<template>
   <div id="app">
      <input class="input" @keyup="update()">
      <div class="render"></div>
   </div>
</template>

<script>
export default {
   methods:{
      update () {
         document.querySelector(".render").innerHTML=`<component-${
            document.querySelector(".input").value
         } />`
      }
   }
}
</script>

Chaque fois que j'exécute le code, le composant ne s'affiche pas. Existe-t-il un moyen de rendre ce composant ?

Montrez la meilleure réponse

Ce n'est pas la bonne façon de rendre dynamiquement les composants dans Vue - à la place, vous devriez utiliser :is

<template>
   <div id="app">
      <input class="input" @keyup="update($event.target.value)">
      <component :is="myComponent"></component>
      </div>
</template>

<script>
export default {
   data() {
     return {
       myComponent: undefined
     }
   },
   methods:{
      update (component) {
         this.myComponent = component
      }
   }
}
</script>

Une démo sandbox est ici