Vuejs:如何在 Vue-multiselect 中触发 keyup 事件
Vuejs : How to trigger an event on keyup in Vue-multiselect
要求:我有可搜索的下拉菜单,最初我不会有任何下拉项目,但是一旦用户输入一个字母,我希望调用一个 API给我一个以该字母开头的下拉项目列表(例如,键入“A”应该 return“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>
恐怕无法使用此包实现。
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;
},
},
};
尽管如此,您应该根据自己的需要调整此示例。
要求:我有可搜索的下拉菜单,最初我不会有任何下拉项目,但是一旦用户输入一个字母,我希望调用一个 API给我一个以该字母开头的下拉项目列表(例如,键入“A”应该 return“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>
恐怕无法使用此包实现。
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;
},
},
};
尽管如此,您应该根据自己的需要调整此示例。