时间戳

首页 > 解决方案 > 按键未触发事件

javascript - 按键未触发事件

问题描述

<multiselect v-model="value" :options="websites" label="url" track-by="url" :allow-empty="false" class="header-select mr-3" v-on:keyup.enter="submit"></multiselect>

要求 - 我有可搜索的下拉菜单，最初我不会有任何下拉项目，但是一旦用户输入一个字母，我希望调用一个 api，它会给我一个以该字母开头的下拉项目列表（例如，键入 A 应该返回苹果，蚂蚁...等）

简而言之 - 我需要一个带有下拉菜单的输入字段。（类似于谷歌搜索）

按键事件在多选中不起作用，@change 等事件可用于选择该多选的下拉项，但我希望按键能够工作并触发事件。- https://vue-multiselect.js.org/#sub-events

我使用了一个 npm 包 - https://www.npmjs.com/package/vue-multiselect，https://vue-multiselect.js.org/（我们不能用普通的输入字段来实现这一点吗？按键可以工作那里，但是如何将它与下拉列表结合起来？）

谁能帮我解决这个问题，如果问题出在无法触发按键事件的包上，有人可以为此目的建议另一个包吗？

标签： javascriptvue.js

解决方案

好的，所以我已经检查了该组件的代码库，并且没有 @keydown 事件，因为父级不是输入。它被包裹在一个div中。

更新搜索词时会触发一个事件，可以在此处查看

您要收听的事件是@search-change

例如

    <multiselect
    v-model="value"
    :options="websites"
    label="url"
    track-by="url"
    :allow-empty="false"
    class="header-select mr-3"
    @search-update="myFunctionThatWillTriggerSomething"
    v-on:keyup.enter="submit"/>

但请注意，在调用事件时触发您的 api 调用search-update会向您的 api 发送垃圾邮件。你会想看看去抖动它。

推荐阅读