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

Question

我有一个Vue组件

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

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

按钮事件将触发doFilter(),但是按键事件不会触发,除非我添加.native修饰符.

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

该Vue.js文件说,这一下 .native:

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

我什么时候需要使用.native？如果没有它,为什么键盘事件不会触发？

更新1:添加代码集和代码

可运行的演示在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>

Answer 1

根据您的评论,我假设您正在使用Vue材料库和<md-input>组件而不是<input>元素.

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

但是,该组件不会发出keyup事件,因此doFilter永远不会调用该方法.

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

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