Vuejs：如何在 Vue-multiselect 中觸發 keyup 事件

Question

要求：我有可搜索的下拉列表，最初我不會有任何下拉項目，但是一旦用戶輸入一個字母，我希望調用一個 API，該 API 將為我提供以該字母開頭的下拉項目列表（例如，鍵入“A”應該返回“蘋果”、“螞蟻”等）。

簡而言之：我需要一個帶下拉菜單的輸入字段（類似於 Google 的搜索）。

我找到了一個 npm 包： https ://www.npmjs.com/package/vue-multiselect

當給定已經初始化的下拉項時，這工作正常。

<multiselect
  v-model="valueabc"
  :options="websites"
  label="url"
  track-by="url"
  class="header-select mr-3"></multiselect>

我想用從 API 結果填充的值的結果填充選項，但我找不到要在 keyup 上觸發的事件。

試過： v-on:keyup.enter="eventname"和@keydown="eventname" ：

<multiselect ... v-on:keyup.enter="eventname"></multiselect>

<multiselect ... @keydown="eventname"></multiselect>

恐怕使用這個包無法實現這一點。

Answer 1

vue-multiselect確實具有異步填充項目的能力（例如，用於 ajax 加載），無需重新發明輪子。 在這里閱讀文檔。

簡而言之，你這樣做：

<multiselect
  v-model="valueabc"
  :options="websites"
  label="url"
  track-by="url"
  class="header-select mr-3"
  :searchable="true"
  :internal-search="false"
  :loading="isLoading"
  :clear-on-select="false"
  :show-no-results="false"
  @search-change="searchWebsites"
/>

export default {
  data() {
    return {
      websites: [],
      isLoading: false,
    };
  },
  methods: {
    async searchWebsites(query) {
      this.isLoading = true;
      // make API request to load websites
      this.websites = await loadWebsites(query);
      this.isLoading = false;
    },
  },
};

不過，您應該調整此示例以滿足您的需求。