Tengo dos componentes llamados componente-1 y componente-2, junto con este código 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>Cada vez que ejecuto el código, el componente no se procesa. ¿Hay alguna manera de hacer que este componente se renderice?
Esta no es la forma correcta de representar componentes dinámicamente en Vue ; en su lugar, debe usar :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>Una demostración de sandbox está aquí