Aquí el usuario debería poder crear tantas entradas de personas como quiera con el botón con el método "useIt()". Para esto creé una plantilla. Cuando el usuario hace clic en el botón, la plantilla debe clonarse y adjuntarse al contenedor div. Ya probé esta función en jsfiddle y funciona perfectamente bien. Ahora copié esto en mi aplicación vue y ya no funciona. No recibo ningún error o advertencia, simplemente no hace nada. ¿Cuál podría ser el error?
Aquí está el enlace jsfiddle a mi funcionalidad: http://jsfiddle.net/4vuae12j/1/
<template> <div class="content_modal noShadow modul"> <div class="modal-header modul_header"> <h3 class="modul_title">{{ title }}</h3> </div> <div class="body"> <!-- Person Data --> <testmodul1></testmodul1> <!-- Degree --> <testmodul2 title="2 Degree"></testmodul2> </div> <button @click="useIt()"> Use me </button> <div id="container"></div> <template id="temp"> <div> <label>Firstname</label> <input type="text"/> <label>Lastname</label> <input type="text"/> </div> </template> </div> </template> <script> //Load Modules let testmodul1 = Vue.defineAsyncComponent(() => loadModule("./components/1_1_Module_Person.vue", options) ); let testmodul2 = Vue.defineAsyncComponent(() => loadModule("./components/2_Module_Degree.vue", options) ); export default { data() { return { title: "Title", }; }, components: { testmodul1: testmodul1, testmodul2: testmodul2, }, methods:{ useIt(){ console.log("##########CLICKED##########"); var content = document.querySelector('#temp').content; console.log(content); document.querySelector('#container').appendChild( document.importNode(content, true)); } } }; </script>Puedes usarlo en un v-for como el siguiente:
<div v-for="newContent in temp" :key="newContent.id"> <div> <label>Firstname</label> <input type="text"/> <label>Lastname</label> <input type="text"/> </div> </div> de lo que tiene que cambiar algo en su evento de click , por ejemplo, como lo siguiente:
methods: { useIt() { this.temp.push({ id: this.id += 1; }) } } data() { return { id: 0, temp: [{ //this is your first "input" id: 0, }], } } Entonces, cada vez que hace clic en su botón, empuja content nuevo que está definido en su template a su plantilla. También presiona cada vez que hace clic en ese botón una unique ID para su plantilla, lo que hace que sea más fácil trabajar con ella en el futuro.
¡Espero que esta respuesta te ayude!
solo para usted: es más fácil usar lo que vue.js le brinda en oportunidades como v-for , v-model , v-if , etc., que tratar de resolverlo con jQuery :)