[英]Datalist - how to launch function on click option?
I have a problem with datalist
with my input
search in VueJS, why when i click with mouse or with enter on one of the option on my datalist
, my function getData()
which is called to @click
and @keypress.enter
is not launched?我在datalist
中input
搜索的数据列表有问题,为什么当我用鼠标单击或在我的datalist
列表上的一个选项上输入时,我的 function getData()
被调用到@click
和@keypress.enter
keypress.enter 没有启动?
here is my code:这是我的代码:
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 totally have no idea what is wrong here, can someone tell me?我完全不知道这里出了什么问题,有人可以告诉我吗?
The <datalist>
control doesn't have it's own events, you have to use the <input>
. <datalist>
控件没有自己的事件,您必须使用<input>
。 Both clicks and keyboard events will trigger the input's keydown
listener.点击和键盘事件都会触发输入的keydown
侦听器。
<input
list="data"
v-model.trim="searchBy"
@keydown="getData"
@keyup.enter="getAllDatas"
type="text"
placeholder="Find more data..."
/>
This will pass the event to the handler, so unless you can work around that, you might want to use a <select>
instead, or a custom control.这会将事件传递给处理程序,因此除非您可以解决这个问题,否则您可能希望改用<select>
或自定义控件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.