时间戳

首页 > 解决方案 > 单击时使用 vue 重新创建/克隆整个 div

javascript - 单击时使用 vue 重新创建/克隆整个 div

问题描述

我正在尝试解决这个问题，但尚未使用任何直接方法取得成功，但我只是希望能够单击“添加另一个区域”链接，然后单击重新创建我的整个 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
   }
  }
})

标签： javascriptvue.js

解决方案

vueAC每当您想重新渲染div 时，我建议您向 div 添加一个密钥，您只需要更新密钥即可。

<div id="vueAC" class="uk-grid" :key="myKey">
</div>

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

new Vue({
data(){
 return {
   myKey: 0,
 }
},
methods: {
 addDiv(){
   // Do whatever you need to do.

   this.myKey++;
 }
}
})

有关更多信息，您可以查看文档：https ://vuejs.org/v2/api/#key

推荐阅读