我有一个 Vue 组件
- an
<input>绑定的元素v-on:keyup.enter key to doFilter()
- 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" />
The Vue.js 文档说明了这一点 .native:
监听组件根元素上的本机事件。
我什么时候需要使用.native为什么没有它就不会触发 keyup 事件？
更新1：添加codepen和代码
可运行的演示位于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 材质库和<md-input>组件而不是<input>元素。
如果你听keyup事件不使用.native修饰符（通过<md-input @keyup.enter="doFilter">），那么你的组件正在等待<md-input>发出自定义的组件keyup event.
但是，该组件不会发出keyup event， 所以doFilter方法永远不会被调用。
正如文档所述，添加.native修饰符将使组件监听“根元素上的本机事件”<md-input>成分。
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.
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
