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()" …>

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

香草 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必须要起名字的原因。您无法删除使用匿名函数附加的事件侦听器。

vue md-autocomplete keyup.enter 不工作

vue md-autocomplete keyup.enter not working

vue.js

vue-material

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

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

香草 JS 可以工作

注意事项