vue.js: create component from string

Question

I have two components named component-1 and component-2, along with this vue.js code:

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

Whenever I run the code, the component doesn't render. Is there a way to get this component to render?

match · Accepted Answer · 2022-01-02 19:31:26Z

4

This isn't the right way to render components dynamically in Vue - instead you should use :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>

A sandbox demo is here

edited Jan 2, 2022 at 19:31

answered Jan 2, 2022 at 19:10

match

11.2k3 gold badges25 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

vue.js: create component from string

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related