Quero criar um componente de autocomplete
, então tenho o seguinte codigo.
<Input v-model="form.autocomplete.input" @on-keyup="autocomplete" />
<ul>
<li @click="selected(item, $event)" v-for="item in form.autocomplete.res">
{{item.title}}
</li>
</ul>
autocomplete(e){
const event = e.path[2].childNodes[4]
if(this.form.autocomplete.input.length > 2){
this.Base.get('http://localhost:3080/post/search/post', {
params: {
q: this.form.autocomplete.input
}
})
.then(res => {
this.form.autocomplete.res = res.data
if(this.form.autocomplete.res.length > 0)
event.style.display = 'block'
})
}
},
selected(item, e){
this.form.autocomplete.item = item
console.log(e)
}
Porem, como eu faria para ter o retorno apos selecionar meu item no arquivo principal?
Ex:
Home.vue
<Autocomplete :url="www.url.com/test" />
Ao selecionar o item que eu quero do meu autocomplete
, como pegar o retorno dele e armazena-lo nesse arquivo, como se eu estivesse usando v-model
?
OBS: A URL e outras informações irei passar via props
posteriormente.
form.autocomplete.item
, porem esse valor fica armazenado emautocomplete.vue
e não no arquivo que estou utilizando que no caso seria oHome.vue
(ou qualquer outro)