Here the user should be able to create as many person entrys as he want with the button with the method "useIt()". For this I created a template. When the user clicks the button, the template should be cloned and appended to the container div. I already tried this function in jsfiddle and it works perfectly fine. Now I copied this into my vue application and it does not work anymore. I do not get any errors or warnings, it simply does nothing. What could the mistake be?
Here is the jsfiddle link to my functionality: 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>
You can use it in a v-for like following:
<div v-for="newContent in temp" :key="newContent.id">
<div>
<label>Firstname</label>
<input type="text"/>
<label>Lastname</label>
<input type="text"/>
</div>
</div>
than you have to change something on your click event, e.g like following:
methods: {
useIt() {
this.temp.push({
id: this.id += 1;
})
}
}
data() {
return {
id: 0,
temp: [{ //this is your first "input"
id: 0,
}],
}
}
So everytime you click on your button you push new content which is defined in your template to your template. You also push everytime you click on that button a unique ID to your template - which makes it more easier to work with it in the future.
Hopefully this answer helps you out!
just for you: It's easier to use what vue.js is giving you on oppurtunitys like v-for, v-model, v-if and so, than trying to solve it with jQuery :)