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

<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 an <input> element that binds the v-on:keyup.enter key to doFilter()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:When do I need to use .native and why does the keyup event not trigger without it?Update 1: Add codepen and codeRunnable 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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！