How to create and clone template in Vue.js

Question

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>

Answer 1

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, eg 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 :)