I've been grappling with this issue and haven't found a straightforward solution yet. My goal is simple: I want to click on the 'Add another zone' link and, upon clicking it, recreate the entire div with ID "vueAC" below the current one.
How can I achieve this considering my existing structure:
<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(){
// My objective here is to reproduce the entire div with ID vueAC just below the current one
}
}
})