【问题标题】：vue md-autocomplete keyup.enter not workingvue md-autocomplete keyup.enter 不工作
【发布时间】：2019-12-05 18:26:35
【问题描述】：

我正在尝试在我的应用程序中添加自动完成功能，但似乎无法让 @keyup.enter 执行功能。 The documentation 没有涉及到这一点。下面是我的代码。

    <md-autocomplete
      v-model="selected"
      :md-options="users"
      :md-fuzzy-search="false"
      @keyup.enter="click_select()"
      >
      <label id="placehold" v-if="selected == null || selected == ''">Start typing...</label>

      <template slot="md-autocomplete-item" slot-scope="{ item, term }">
        <md-highlight-text :md-term="term">{{ item }}</md-highlight-text>
      </template>

      <template slot="md-autocomplete-empty" slot-scope="{ term }" v-if="term != null">
        "{{ term }}" is not currently on file. <a @click="noop()">You can add them here</a>.
      </template>
    </md-autocomplete>

    <div class="md-layout md-gutter">
      <transition name="fade">
        <a class="selectlink" v-if="selected != null && selected !='' && view_link" id="link-effect-4" v-on:click="show_data()">Select</a>
        <a class="selectlink" v-if="selected != null && selected !='' && view_next_link" id="link-effect-4">Next</a>
      </transition>
    </div>

【问题讨论】：

标签： vue.js vue-material

【解决方案1】：

为什么您的解决方案不起作用

为了侦听组件 (md-autocomplete) 上的事件，该组件必须发出该事件。从source 一瞥看来，它并没有这样做。如果任何子组件（例如，<input>）发出事件，但外部组件没有通过它，您将永远看不到它。

一个在这里可能行不通的 Vue 解决方案

但是，您仍然可以将事件侦听器附加到您传递给组件的插槽。它看起来像这样：

<template slot="md-autocomplete-item" @keyup.enter="click_select()" …>

我没有仔细阅读文档，但我也找不到合适的位置。

Vanilla JS 可以工作

作为最后的手段，您可以将事件侦听器附加到一个 DOM 节点，该节点是您实际想要侦听的组件的父级。假设md-autocomplete 挂载在<div id="parentDiv"> 中，你可以这样做

function listenerFunction(event) {
  if (event.keyCode === 13) {
  // keycode 13 is the return key
    click_select()
  }
}

document.getElementById('parentDiv').addEventListener('keyup', listenerFunction)

注意事项

还可以通过event.target 或event.composedPath 来检查事件是否源自您认为应该发生的位置（即在组件的搜索栏中）

在任何情况下，您都应该记住在组件被销毁时分离事件侦听器，否则您可能会在以后重新安装组件时多次调用该函数：

beforeDestroy() {
  document.getElementById('parentDiv').removeEventListener('keyup', listenerFunction)
}

这也是为什么必须为listenerFunction 命名的原因。您不能删除使用匿名函数附加的事件侦听器。

【讨论】：