title: Vue: when to use @keyup.native in input elements
body: <p>I have a Vue component with</p>
  <ol>
  <li>an <code>&lt;input&gt;</code> element that binds the <code>v-on:keyup.enter</code> key to <code>doFilter()</code></li>
  <li>a <code>&lt;button&gt;</code> that binds the <code>v-on:click</code> event to <code>doFilter()</code></li>
  </ol>
  <pre class="lang-html prettyprint-override"><code>&lt;input type=&quot;text&quot; v-model=&quot;myVar&quot; @keyup.enter=&quot;doFilter&quot; /&gt;
  &lt;button @click=&quot;doFilter&quot;&gt;Filter&lt;/button&gt;
  </code></pre>
  <p>The button event will fire <code>doFilter()</code>, but the key up event will not fire, unless I add the <code>.native</code> modifier.</p>
  <pre><code>&lt;input type=&quot;text&quot; v-model=&quot;myVar&quot; @keyup.native.enter=&quot;doFilter&quot; /&gt;
  </code></pre>
  <p>The <a href="https://v2.vuejs.org/v2/api/#v-on" rel="nofollow noreferrer">Vue.js documentation says this about</a> <code>.native</code>:</p>
  <blockquote>
  <p>listen for a native event on the root element of component.</p>
  </blockquote>
  <p>When do I need to use <code>.native</code> and why does the keyup event not trigger without it?</p>
  <h1>Update 1: Add codepen and code</h1>
  <p>Runnable demo at <a href="https://codepen.io/hanxue/pen/Zapmra" rel="nofollow noreferrer">https://codepen.io/hanxue/pen/Zapmra</a></p>
  <pre><code>&lt;div id=&quot;app&quot;&gt;
    &lt;md-toolbar&gt;
      &lt;h1 class=&quot;md-title&quot; style=&quot;flex: 1&quot;&gt;@keyup.native event&lt;/h1&gt;
      &lt;md-button class=&quot;md-icon-button&quot;&gt;
        &lt;md-icon&gt;more_vert&lt;/md-icon&gt;
      &lt;/md-button&gt;
    &lt;/md-toolbar&gt;
    
    &lt;md-input-container&gt;
        &lt;label&gt;@keyup.enter&lt;/label&gt;
                &lt;md-input type=&quot;text&quot; @keyup.enter=&quot;doFilter&quot; placeholder=&quot;@keyup.filter&quot;&gt;
                &lt;/md-input&gt;
            &lt;/md-input-container&gt;
    
      &lt;md-input-container&gt;       
          &lt;label&gt;@keyup.native.enter&lt;/label&gt;
                &lt;md-input type=&quot;text&quot; @keyup.native.enter=&quot;doFilter&quot; placeholder=&quot;@keyup.native.filter&quot;&gt;
                &lt;/md-input&gt;
            &lt;/md-input-container&gt;
    
      &lt;md-input-container&gt;       
                &lt;button @click=&quot;doFilter&quot; placeholder=&quot;@keyup.filter&quot;&gt;
      @click  &lt;/button&gt;
            &lt;/md-input-container&gt;
  &lt;/div&gt;
  &lt;script&gt;
  Vue.use(VueMaterial)
  
  var App = new Vue({
    el: '#app',
    methods: {
     doFilter: function() {
       alert('doFilter!')
     }
    },
  })
  &lt;/script&gt;
  </code></pre>