数据列表-如何在点击选项时启动功能

Question

我在VueJS中搜索input时遇到datalist问题，为什么当我用鼠标或enter键单击datalist上的某个选项时，我的函数getData()(调用@click和@keypress.enter(没有启动？

这是我的代码：

模板：

<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>

脚本：

methods: {
getAllDatas() {
fetch(`someURL`)
.then(res => res.json())
.then(
res => {
this.data = res
}
)
},
...mapActions(["fetchData"]),
async getData() {
await this.fetchData();
},

我完全不知道这里出了什么问题，有人能告诉我吗？

Answer 1

<datalist>控件没有自己的事件，必须使用<input>。单击和键盘事件都将触发输入的keydown侦听器。

<input
list="data"
v-model.trim="searchBy"
@keydown="getData"
@keyup.enter="getAllDatas"
type="text"
placeholder="Find more data..."
/>

这将把事件传递给处理程序，所以除非您能解决这个问题，否则您可能希望使用<select>或自定义控件。