I have a Vue component with

1. an <input> element that binds the v-on:keyup.enter key to doFilter()
2. a <button> that binds the v-on:click event to 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 .native modifier.

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

The Vue.js documentation says this about .native:

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

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

Update 1: Add codepen and code

Runnable demo at

<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>

I have a Vue component with

1. an <input> element that binds the v-on:keyup.enter key to doFilter()
2. a <button> that binds the v-on:click event to 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 .native modifier.

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

The Vue.js documentation says this about .native:

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

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

Update 1: Add codepen and code

Runnable demo at 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>

• javascript
• vuejs2
• vue-component

• Weird, their page doesn't show any key modifier called native. vuejs.org/v2/guide/events.html#Key-Modifiers For the first part, isn't @keyup.enter="doFilter" saying call doFilter when the user types enter? – Ruan Mendes Commented Nov 7, 2017 at 16:12
• It's at this page vuejs.org/v2/api/#v-on That's right, I expect @keyup.enter="doFilter" to work, but it doesn't. Only when I change it to @keyup.native.enter="doFilter" it works – Hanxue Commented Nov 7, 2017 at 16:15
• I can't reproduce this: jsfiddle.net/y7hm78dy. Can you post a fiddle of this happening? Is it really an <input> element, or is it a component that wraps an input element, (like <el-input> or similar) and you've just simplified your example? – thanksd Commented Nov 7, 2017 at 16:26
• Indeed I am using vuematerial.io 's <md-input>. The code is pretty complex, I will try to produce a fiddle or codepen – Hanxue Commented Nov 7, 2017 at 16:41

2 Answers 2

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

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

But, that component does not emit a keyup event, so the doFilter method will never be called.

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

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

I had the same problem on a custom vue component on which I was listening to both @select and @keyup.native.enter and I was receiving the Enter key twice because I didn't pay attention: onSelect emits an onKeyDown for Enterand onkeyUp flared secondly.

My solution was to listen to @keydown.native.enter so that the @select cycle of keys was unbothered (which is keydown -> keypresssed -> keyup).