Omar Leyva
Omar Leyva
Vue.js
Comparte:

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
Jorge Davila (838 xp)
Que estas pensando hacer? Una especie de factory? Un Componente Togleable? O una lista?
Juan Omar Leyva Ortega
Juan Omar Leyva Ortega (22 xp)
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
Juan Omar Leyva Ortega (22 xp)
Nota: La verdad no sé si use bien el término de factory.
Jorge Davila
Jorge Davila (838 xp)
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/