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

问题描述

我有一个带有

的 Vue 组件

1. 一个 元素，它将 v-on:keyup.enter 键绑定到 doFilter()
2. 一个将 v-on:click 事件绑定到 doFilter()
的

<button @click="doFilter">过滤器</button>

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

Vue.js 文档说明了这一点 .native:

<块引用>

监听组件根元素上的原生事件.

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

更新1:添加codepen和代码

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

<md-工具栏><h1 class="md-title" style="flex: 1">@keyup.native 事件</h1><md-button class="md-icon-button"><md-icon>more_vert</md-icon></md-button></md-工具栏><md-输入-容器><label>@keyup.enter</label><md-input type="text" @keyup.enter="doFilter" placeholder="@keyup.filter"></md-input></md-input-container><md-输入-容器><label>@keyup.native.enter</label><md-input type="text" @keyup.native.enter="doFilter" placeholder="@keyup.native.filter"></md-input></md-input-container><md-输入-容器><button @click="doFilter" placeholder="@keyup.filter">@click </button></md-input-container>
<脚本>Vue.use(VueMaterial)var App = new Vue({el: '#app',方法: {doFilter:函数(){警报('doFilter！')}},})

解决方案

根据您的评论，我假设您正在使用 Vue Material libary 和 组件，而不是 元素.

如果您在不使用 .native 修饰符的情况下监听 keyup 事件(通过 <md-input @keyup.enter="doFilter">)，那么您的组件正在等待 组件发出自定义 keyup 事件.

但是，该组件不会发出 keyup 事件，所以 doFilter 方法永远不会被调用.

如文档所述，添加.native 修饰符将使组件侦听 组件的根元素上的本地事件".

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

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>

解决方案

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.

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