es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Vue.js: crear componente a partir de una cadena

31 Jul, 2023 Programación

Tengo dos componentes llamados component-1 y component-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=<code><component-${
            document.querySelector(".input").value
         } /></code>
      }
   }
}
</script>

Cada vez que ejecuto el código, el componente no se renderiza. ¿Hay alguna forma de hacer que este componente se renderice?

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Sí, hay una forma de hacer que el componente se renderice. El problema parece estar en la forma en que se genera dinámicamente la etiqueta del componente utilizando interpolación de cadenas en la plantilla literal. Aquí hay algunos pasos para solucionar el problema:

    1. Reemplaza la interpolación de cadenas con concatenación de cadenas y envuelve la etiqueta del componente dentro de una etiqueta de plantilla de la siguiente manera:
    document.querySelector(".render").innerHTML=`<template><component-${document.queryselector(".input").value}></component-${document.queryselector(".input").value}></template>`;
    1. La etiqueta del componente generada dinámicamente debe ser compilada por Vue.js para que se renderice correctamente. Puedes lograr esto utilizando el método Vue.compile(). Así es como puedes implementarlo en el método update():
    update () {
   const compiledComponent = Vue.compile(`<template><component-${document.queryselector(".input").value}></component-${document.queryselector(".input").value}></template>`);
   new Vue({
      render: compiledComponent.render
   }).$mount('.render');
}

    En este código, estamos compilando la etiqueta del componente generada dinámicamente y luego creando una nueva instancia de Vue con la función render del componente compilado. Finalmente, estamos montando esta instancia de Vue en el elemento contenedor donde queremos que se renderice el componente, que en este caso es el elemento div .render.

    Con estos cambios, el componente debería renderizarse correctamente cada vez que ingreses un nombre de componente válido en el campo input.

Comments are closed.