如何在 Vue.js 中创建和克隆模板

Question

在这里，用户应该能够使用“useIt()”方法使用按钮创建任意数量的人员条目。为此，我创建了一个模板。当用户单击按钮时，模板应该被克隆并附加到容器 div 中。我已经在 jsfiddle 中尝试过这个功能，它工作得很好。现在我把它复制到我的 vue 应用程序中，它不再工作了。我没有收到任何错误或警告，它什么也不做。可能是什么错误？

这是我的功能的 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>

Answer 1

您可以在v-for 中使用它，如下所示：

<div v-for="newContent in temp" :key="newContent.id">
  <div>
    <label>Firstname</label>
    <input type="text"/>
    <label>Lastname</label>
    <input type="text"/>
  </div>
</div>

您必须在 click 事件中更改某些内容，例如：

methods: {
  useIt() {
    this.temp.push({
      id: this.id += 1;
    })
  }
}

data() {
  return {
    id: 0, 
    temp: [{    //this is your first "input" 
      id: 0, 
    }],
  }
}

因此，每次单击按钮时，都会将 content 中定义的 content 推送到模板中。您还可以在每次单击该按钮时将 unique ID 推送到您的模板 - 这使得将来使用它更容易。

希望这个答案能帮到你！

只为您：使用vue.js 为您提供的机会（如v-for、v-model、v-if 等）比尝试使用@987654332 解决问题更容易@ :)