Datalist - 如何在點擊選項時啟動 function？

Question

我在datalist中input搜索的數據列表有問題，為什么當我用鼠標單擊或在我的datalist列表上的一個選項上輸入時，我的 function getData()被調用到@click和@keypress.enter 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>或自定義控件。