Блог

Главная - Вопросы по программированию - воссоздать / клонировать весь div с помощью vue по щелчку

воссоздать / клонировать весь div с помощью vue по щелчку

#javascript #vue.js

#javascript #vue.js

Вопрос:

Я пытаюсь разобраться в этом, но пока не добился успеха ни с какими прямыми методами, но я просто хочу иметь возможность щелкнуть ссылку «Добавить другую зону», а затем по этому щелчку воссоздать весь мой div с идентификатором «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
   }
  }
})

Ответ №1:

Я бы рекомендовал вам добавлять ключ к div vueAC всякий раз, когда вы хотите повторно отобразить 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://v2.vuejs.org/v2/api/#key

Комментарии:

1. Спасибо, это имеет смысл с точки зрения сохранения уникальности. Но как мне на самом деле клонировать элементы div?

2. В этом случае я бы рекомендовал иметь массив данных, которые вам нужно клонировать, и в этом случае вы можете использовать цикл для печати всех элементов в div <div id="vueAC" class="uk-grid" v-for="(data, index) in myDataobject" :key="index"> </div> . При таком подходе вам просто нужно манипулировать массивом, и Vue выполнит рендеринг.

Ответ №2:

addDiv должен находиться вне компонента в качестве метода родительского компонента. В родительском компоненте. У вас должен быть массив зон в data. Как только вы нажмете, addDiv добавьте пустую зону с пустой информацией в this.zones . Выполните цикл над каждой зоной с помощью v-for.