Allow the user to create multiple person entries by clicking a button with the method "useIt()". A template has been created for this purpose. When the button is clicked, the template should be duplicated and added to the container div. This functionality has been tested in jsfiddle and it works correctly. However, after copying it into my Vue application, it no longer functions. There are no error messages or warnings, it simply does not work. What could be causing this issue?
Here is the link to the functionality on jsfiddle: 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>