Javascript Datalist-如何在单击选项时启动功能？

我在VueJS中搜索

数据列表时遇到了问题，为什么当我用鼠标或enter键单击
数据列表上的某个选项时，我的函数
getData（）
被调用来单击
和
@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>

我完全不知道这里出了什么问题，有人能告诉我吗？
控件没有自己的事件，您必须使用
。单击和键盘事件都将触发输入的
向下键
侦听器



这将把事件传递给处理程序，因此除非您能够解决这个问题，否则您可能希望使用
或自定义控件在您的方法部分，我不能这样做，因为我需要为我的
getData
函数提供一个属性，但在
input
中，我没有数据要做。在这种情况下，您不能使用数据列表。您可以选择是一个
或一个模仿数据列表行为的自定义控件。您能否显示示例witch
select
？我在前端的能力很弱，但我需要这个控件：（plzWell，它基本上就是你在这里拥有的，但是没有输入。所以你不能用它来获得打字能力。如果你需要，那么你必须使用自定义控件。这就是你想要的吗？谢谢@Dan，这很有帮助！
 methods: {
    getAllDatas() {
      fetch(`someURL`)
        .then(res => res.json())
        .then(
          res => {
            this.data = res
          }
        )
    },
    ...mapActions(["fetchData"]),
    async getData() {
       await this.fetchData();
  },