I'm facing an issue with datalist in my VueJS search input. Why isn't my function getData(), which is triggered by both @click and @keypress.enter, being called when I select an option from the datalist using mouse or enter key?
Below is the code snippet:
template:
<input
list="data"
v-model.trim="searchBy"
@keyup.enter="getAllDatas"
type="text"
placeholder="Find more data..."
/>
<br />
<datalist id="data">
<option v-for="r in repos.items"
:key="r.id"
:value="r.name"
@click="getData(r.id)"
@keypress.enter="getData(r.id)" />
</datalist>
script:
methods: {
getAllDatas() {
fetch(`someURL`)
.then(res => res.json())
.then(
res => {
this.data = res
}
)
},
...mapActions(["fetchData"]),
async getData() {
await this.fetchData();
},
I'm puzzled as to what might be causing this problem. Any insights would be greatly appreciated.