为什么这个方法不被@keyup 事件触发？

Question

我正在尝试将文本字段集中在 ALT + C 快捷方式（在我的 Electron-Vue 应用程序中）：

Codepen: https://codepen.io/anon/pen/aqrBzq?editors=1010

Codepen 使用 this v-text-field custom component and as this 对 Github 的评论说，该方法应该用 $nextTick 包装以便聚焦此组件

需要这个，但不起作用

 <v-text-field
   ref="filter"
   @keyup.alt.67="focusFilter" 
   label="type here" >
 </v-text-field>

 ...

 methods: {
   focusFilter(event){
     this.$nextTick(event.target.focus)
   }
 }

这有效，但不是我需要的：

我也试过下面这段代码，试图用一个按钮聚焦它，它起作用了，但我想让它用一个快捷键（例如 ALT + C 但更优选 CTRL + F，但为了示例我不使用保留捷径）

 <v-btn @click="focusFilter()">focus</v-btn>

 ...

 methods: {
   focusFilter(event){
     this.$nextTick(this.$refs.filter.focus)
   }
 }

Answer 1

当您在组件上侦听本机事件时，您需要使用 .native 修饰符。

所以改用这个：

@keyup.native.alt.67="focusFilter"

详情在这里：https://vuejs.org/v2/guide/components.html#Binding-Native-Events-to-Components

如果您想在按下 alt+c 时聚焦此输入并且聚焦任何内容，您需要为 keyup.[=20= 添加一个事件处理程序到 window ]

我创建了一种在适当的情况下聚焦它的方法，例如：

methods: {
  listenForFocusFilterShortcut (event) {
    if (event.keyCode === 67 && event.altKey) {
      this.$refs.filter.focus()
    }
  },
}

然后，添加一个已创建的挂钩，并在有 keyup 事件时将此回调附加到 window。

created () {
  window.addEventListener(
    'keyup',
    this.listenForFocusFilterShortcut
  )
},

然后，移除组件时移除事件监听器：

destroyed () {
  window.removeEventListener(
    'keyup',
    this.listenForFocusFilterShortcut
  )
}

为什么这个方法不被@keyup 事件触发？

Why isn't this method getting triggered by a @keyup event?

vue.js

vuejs2

vuetify.js

需要这个，但不起作用

这有效，但不是我需要的：