Vue：何时在输入元素中使用@ keyup.native [英] Vue: when to use @keyup.native in input elements

问题描述

我有一个Vue组件

1. 一个< input> 元素将 v-on：keyup.enter 键绑定到 doFilter（）


2. a < button> 绑定 v-on：点击事件到 doFilter （）

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>

按钮事件将触发 doFilter（） ，但是除非我添加 .native 修饰符，否则按键事件不会触发。

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

Vue.js文档中说这是关于 .native ：

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

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

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

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

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

推荐答案

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

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.

如果你听的话 keyup 事件，不使用 .native 修饰符（通过< md-input @keyup。输入=doFilter> ），然后您的组件正在等待< md-input> 组件发出自定义 keyup 事件。

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.

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

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

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

所以，< md-input @ keyup.native.enter =doFilter> 会听原生 keyup < md-input> 组件的根元素的DOM事件，并调用 doFilter 方法，当从 Enter 键触发时。

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.

这篇关于Vue：何时在输入元素中使用@ keyup.native的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！