clonar componente dianmicamente con vue

Pregunta hice un componente que se llama contacts y ese mismo componente tiene un componente hijo que se llama
contact los cual funcionan correctamente, pero quiero que cuando presione un boto me agrege otro componente contact
vacio para poder llenarlo.

Nota: Estoy usando laravel.los circulitos son botones solo que a un no les agrego css.

Jorge Davila (838 xp)sep 28, 2019

Que estas pensando hacer? Una especie de factory? Un Componente Togleable? O una lista?

Juan Omar Leyva Ortega (22 xp)sep 29, 2019

Creo que sería una especie de factory porque lo que quiero es que cuando presione el botón me agregue otro componente contacto que es como un formulario en blanco donde viene tres input para que ingreses el nombre el coreo y el telefono.

Juan Omar Leyva Ortega (22 xp)sep 29, 2019

Nota: La verdad no sé si use bien el término de factory.

Jorge Davila (838 xp)sep 30, 2019

Que tal Omar. El termino factory puede ser algo ambiguo , por lo que podria aplicar. Aun asi creo que seria mas correcto usarlo en un componente dinamico, como el caso siguiente:

<input name="name" v-if="hasName">
<input name="email" v-if="hasEmail">
...
<input name="phone" v-if="hasPhone">

<script >
 export default{
 props:{
  name:Boolean,
 etc

}

}

</script>

En esta caso tendrias un componente con campos que se renderizan dinamicamente.

Para el caso de lo que quieres hacer con esto me parece que seran fijos por lo que podria ser o no considera un factory.

Respecto a tu pregunta anterior creo que puedes manejarlo con una lista

<div v-for="(key,form) in forms" :key="key" :id=" 'wrapper'+key">
  ...//tus campos aqui.
</div>

Esto haria que cada que presiones el boton agregue un valor al campo forms(puede ser un entero) y eso agregue un componente. La otra opcion seria utilizar una plantilla de javascript para lograrlo:

data:{
  template:`<form><inputs.....> </form>`
}

almacenandolo dinamicamente dentro de una variable con la comilla simple invertida( olvido el nombre XDD, no me jusgues ) puedes guardar codigo html e interpolar con las variables y simplemente inyectar o crear el componente dinamicamente en un evento onclick. Por ahora es lo que se me ocurre con vuejs, si se me ocurre otra cosa igual lo posteo aqui. Espero que te sea de utilidad.

Edit 1: Revisa este link,te podria ser de utilidad:

https://css-tricks.com/creating-vue-js-component-instances-programmatically/