Append the search result in the input search field vue - vue.js

Question

Here i have an #click event
<h2 #click="action(customer.id)">{{ customer.name }}</h2>
When any result is clicked append this result to the input. Any ideas ?
<input class="search" type="text" name="search" v-model="search" placeholder="Search posts..."
#focus="magic_flag = true">
<div v-if="magic_flag">
<div class="post" v-for="customer in filteredCustomer">
<h2 #click="action(customer.id)">{{ customer.name }}</h2>
</div>
</div>
How can i append the clicked result from the search to the input?
js here updated:
methods: {
action(item) {
this.selected = item
this.search = item.name
this.magic_flag=false;
}
},
I display the rest of the content here updated:
<div v-if="selected">
<div class="post" v-for="customer in filteredCustomer">
<div v-if="customer === selected">
<h1>{{ customer.name }}</h1>
<h1>{{ customer.id }}</h1>
<h1>{{ customer.address }}</h1>
</div>
</div>
</div>

Answer 1

Instead of passing customer.id to the action method, you can pass customer object as parameter to action.
You can do something like this.
var vm = new Vue({
el: '#app',
data: {
search: "",
filteredCustomer:[{name:'test1',id:1},{name:'test2',id:2},{name:'test3',id:3}]
},
methods: {
action (customer) {
this.search=customer.name
this.filteredCustomer=this.filteredCustomer.filter(o=> o.id!=customer.id)
}
}
});
h2{cursor:pointer}
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.17/dist/vue.js" type="text/javascript"></script>
<div id="app">
<input class="search" type="text" name="search" v-model="search" placeholder="Search posts..."
>
<div >
<div class="post" v-for="customer in filteredCustomer">
<h2 href #click="action(customer)">{{ customer.name }}</h2>
</div>
</div>
</div>