Vuejs：如何在 Vue-multiselect 中触发 keyup 事件答案

【问题标题】：Vuejs : How to trigger an event on keyup in Vue-multiselectVuejs：如何在 Vue-multiselect 中触发 keyup 事件
【发布时间】：2020-09-21 16:14:52
【问题描述】：

要求：我有可搜索的下拉菜单，最初我不会有任何下拉项目，但是一旦用户输入了一个字母，我希望调用一个 API，它会给我一个以开头的下拉项目列表该字母（例如，键入“A”应返回“apple”、“ant”等）。

简而言之：我需要一个带有下拉菜单的输入字段（类似于 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>

恐怕使用这个包无法实现。

【问题讨论】：

标签： javascript vue.js events methods vue-multiselect

【解决方案1】：

vue-multiselect 确实具有异步填充项目的能力（例如，用于 ajax 加载），无需重新发明轮子。阅读文档here。

简而言之，你可以这样做：

<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;
    },
  },
};

不过，您应该调整此示例以满足您的需要。

【讨论】：