javascript - Datalist - 如何在单击选项上启动功能？

Question

我在 VueJS 中使用 datalist 搜索时遇到 input 问题，为什么当我用鼠标单击或在 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> 或自定义控件。