Javascript 单击vue重新创建/克隆整个div

我正在尝试解决这个问题，但还没有任何直接的方法成功，但我只是希望能够单击“添加另一个区域”链接，然后在该链接上单击在现有分区下方重新创建id为“vueAC”的整个分区

用我现有的结构处理这个问题的最佳方法是什么：

    <div id="vueAC" class="uk-grid">
    <div class="uk-width-2-10"  >
        <input size="4" type="text" name="mapNumber">
    </div>
    <div class="uk-width-6-10">
      <input style="width:100%" type="text" placeholder="what are you looking for?" v-model="searchString" v-on:keyup="autoComplete" class="form-control">
      <div class="panel-footer componentList" v-if="results.length">
       <ul class="list-group">
        <li class="list-group-item" v-for="result in results">
           <a v-on:click="saveAttribute(result)">@{{ result.attribute_value }}</a>
        </li>
       </ul>
      </div>
    </div>
    <div class="uk-width-2-10" style="border: 1px solid black; height:50px; width: 50px; margin: 0 auto;" >
    
    </div>
</div>

<div>
    <a v-on:click="addDiv">Add another zone</a>
</div>

new Vue({
  components: {
  },
  el: "#vueAC",
  data(){
   return {
    searchString: '',
    results: []
   }
  },
  methods: {
   autoComplete(){
    this.results = [];
    console.log(this.searchString);
    if(this.searchString.length > 2){
     axios.get('/search',{params: {searchString: this.searchString}}).then(response => {
      this.results = response.data;
      console.log(this.results);
      console.log(this.searchString);
     });
    }
   },

   addDiv(){
    // Here I want to recreate the entire div with ID vueAC right below the existing one
   }
  }
})

@{{result.attribute_value}}


添加另一个区域
新Vue({
组成部分：{
},
el:“vueAC”，
数据（）{
返回{
搜索字符串：“”，
结果：[]
}
},
方法：{
自动完成（）{
这个结果=[]；
console.log（this.searchString）；
如果（this.searchString.length>2）{
get（'/search'，{params:{searchString:this.searchString}}）{
this.results=response.data；
console.log（this.results）；
console.log（this.searchString）；
});
}
},
addDiv（）{
//在这里，我想用ID vueAC在现有div的正下方重新创建整个div
}
}
})

addDiv

应作为父组件方法位于组件之外。在父组件中。数据中应该有一个区域数组。单击

addDiv

后，将带有空信息的空区域附加到

this.zones

中。使用v-for在每个区域上循环。

我建议您在需要重新渲染div时向div添加一个键

vueAC

，只需更新键即可

有了这个，你可以使用一个数字作为键，然后增加它

newvue({
数据（）{
返回{
myKey:0，
}
},
方法：{
addDiv（）{
//做你需要做的事。
这个.myKey++；
}
}
})

---

有关更多信息，请参阅文档：

谢谢，这对于保持唯一性很有意义。但是，我实际上如何克隆div的元素呢？在这种情况下，我建议使用需要克隆的数据数组，在这种情况下，您可以使用循环打印div中的所有元素。使用这种方法，您只需操纵阵列，Vue就会进行渲染。