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.

  • es.davy.ai/
  • Programación /
  • Vue 3: En cada clic del botón, genera un nuevo componente y añádelo como hijo en el elemento de destino.

Vue 3: En cada clic del botón, genera un nuevo componente y añádelo como hijo en el elemento de destino.

28 Jul, 2023 Programación

He estado buscando una solución sencilla para generar componentes programáticamente en una aplicación Vue 3. Hasta ahora, he utilizado defineComponent para extender el componente div y adjuntarlo al componente principal a través de createApp y mount:

Componente Principal

<template>
 <button type="button" v-on:click="addDiv"></button>
 <div id="app-main">
 </div>
</template>

<script>
 import {defineComponent, createApp} from 'vue'
 import Div from './components/Div.vue'

 export default{
  name: 'App',
  methods: {
   addDiv: () => {
    let newDiv = defineComponent({extends: Div});
    createApp(newDiv).mount("#app-main");
   }
  }
 }
</script>

Componente Div:

<template>
 <div>Esto es un div</div>
</template>

<script>
 export default {
  name: 'Div'
 }
</script>

El problema con esto es que mount reemplaza todo en el elemento objetivo. Si haces clic en el botón 3 veces, solo aparece 1 div en lugar de 3. Necesito un método donde el código añada el componente como hijo en el elemento objetivo, permitiéndome crear tantos componentes div como desee. ¡Gracias de antemano!

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para agregar componentes programáticamente como hijos en el elemento objetivo, puedes usar el método appendChild(). Aquí tienes una versión actualizada del código:

    Componente Principal

    <template>
  <button type="button" @click="addDiv"></button>
  <div id="app-main"></div>
</template>

<script>
import { defineComponent, createApp } from 'vue'
import Div from './components/Div.vue'

export default {
  name: 'App',
  methods: {
    addDiv: () => {
      let newDiv = defineComponent({ extends: Div });
      let divInstance = createApp(newDiv).mount();
      document.getElementById('app-main').appendChild(divInstance.$el);
    }
  }
}
</script>

    Componente Div

    <template>
  <div>Este es un div</div>
</template>

<script>
export default {
  name: 'Div'
}
</script>

    En esta versión, en lugar de pasar un selector a mount(), no pasamos ningún argumento y usamos appendChild() para agregar el $el de la nueva instancia al elemento objetivo. De esta manera, podemos agregar tantos componentes div como queramos.

Comments are closed.