Vue md-autocomplete keyup.enter不起作用

Question

我正在尝试在我的应用程序上包装一个自动完成功能，并且似乎无法让@ 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>

Answer 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指定名称的原因。您无法删除使用匿名函数附加的事件监听器。