How to create and clone template in Vue.js-CodePudding

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>

CodePudding user response：

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