javascript Vue：何时在输入元素中使用 @keyup.native

Vue: when to use @keyup.native in input elements

提问by Hanxue

I have a Vue component with

我有一个 Vue 组件

1. an <input>element that binds the v-on:keyup.enterkey to doFilter()
2. a <button>that binds the v-on:clickevent to doFilter()

1. <input>将v-on:keyup.enter键绑定到的元素doFilter()
2. 一个<button>结合了v-on:click事件doFilter()

<input type="text" v-model="myVar" @keyup.enter="doFilter" />
<button @click="doFilter">Filter</button>

The button event will fire doFilter(), but the key up event will not fire, unless I add the .nativemodifier.

button 事件将触发doFilter()，但 key up 事件不会触发，除非我添加.native修饰符。

<input type="text" v-model="myVar" @keyup.native.enter="doFilter" />

The Vue.js documentation says this about.native:

该Vue.js文件说，这一下.native：

listen for a native event on the root element of component.

侦听组件根元素上的本机事件。

When do I need to use .nativeand why does the keyup event not trigger without it?

我什么时候需要使用.native，为什么没有它 keyup 事件不会触发？

Update 1: Add codepen and code

更新 1：添加 codepen 和代码

Runnable demo at https://codepen.io/hanxue/pen/Zapmra

https://codepen.io/hanxue/pen/Zapmra 上的可运​​行演示

<div id="app">
  <md-toolbar>
    <h1 class="md-title" style="flex: 1">@keyup.native event</h1>
    <md-button class="md-icon-button">
      <md-icon>more_vert</md-icon>
    </md-button>
  </md-toolbar>

  <md-input-container>
      <label>@keyup.enter</label>
              <md-input type="text" @keyup.enter="doFilter" placeholder="@keyup.filter">
              </md-input>
          </md-input-container>

    <md-input-container>       
        <label>@keyup.native.enter</label>
              <md-input type="text" @keyup.native.enter="doFilter" placeholder="@keyup.native.filter">
              </md-input>
          </md-input-container>

    <md-input-container>       
              <button @click="doFilter" placeholder="@keyup.filter">
    @click  </button>
          </md-input-container>
</div>
<script>
Vue.use(VueMaterial)

var App = new Vue({
  el: '#app',
  methods: {
   doFilter: function() {
     alert('doFilter!')
   }
  },
})
</script>

回答by thanksd

Based on your comments, I'm assuming that you're using the Vue Material libaryand the <md-input>component instead of an <input>element.

根据您的评论，我假设您使用的是Vue Material 库和<md-input>组件而不是<input>元素。

If you listen to the keyupevent without using the .nativemodifier (via <md-input @keyup.enter="doFilter">), then your component is waiting for the <md-input>component to emit a custom keyupevent.

如果您在keyup不使用.native修饰符（via <md-input @keyup.enter="doFilter">）的情况下监听事件，则您的组件正在等待<md-input>组件发出自定义keyup事件。

But, that component does not emit a keyupevent, so the doFiltermethod will never be called.

但是，该组件不会发出keyupevent，因此doFilter永远不会调用该方法。

As the documentation states, adding the .nativemodifier will make the component listen for a "native event on the root element" of the <md-input>component.

正如文档所述，添加.native修饰符将使组件侦听组件的“根元素上的本机事件” <md-input>。

So, <md-input @keyup.native.enter="doFilter">will listen to the native keyupDOM event of the root element of the <md-input>component and call the doFiltermethod when that is triggered from the Enterkey.

因此，<md-input @keyup.native.enter="doFilter">将侦听组件keyup根元素的原生DOM 事件，<md-input>并在doFilter从Enter键触发时调用该方法。

回答by andy

I had the same problem on a custom vue component on which I was listening to both @selectand @keyup.native.enterand I was receiving the Enterkey twice because I didn't pay attention: onSelectemits an onKeyDownfor Enterand onkeyUpflared secondly.

我在一个自定义 vue 组件上遇到了同样的问题，我同时在听这两个组件@select，@keyup.native.enter并且我收到了Enter两次密钥，因为我没有注意：onSelect发出onKeyDownforEnter并onkeyUp第二次发出信号。

My solution was to listen to @keydown.native.enterso that the @selectcycle of keys was unbothered (which is keydown-> keypresssed-> keyup).

我的解决方案是倾听，@keydown.native.enter以便@select键的循环不受打扰（即keydown-> keypresssed-> keyup）。