input 的enter事件会reload页面

2018-04-10  本文已影响47人  小陈陈酱

在vue里面

表象就是:

input 的enter事件会reload页面

尝试过的办法:

<el-input @keyup.enter.stop="action">
<el-input @keyup.enter.prevernt="action">

以上两个方法是在vue官方看到的阻止默认行为的方式
试了这两个完全没有反应
然后get到一个hint

当页面只有一个input的时候,点击enter会自动提交表单并且刷新页面,和vue或者element的组建无关,这是浏览器的默认行为

明白了这个以后,就做了一下尝试:

<el-form ref="newArticleForm" :model="newArticleForm"  :rules="rules" @submit.native.prevent> // 给form添加了一个prevent的修饰符  
//在最初的input上:  
@keyup.enter.native="addLabel" // 需要加一个native的修饰符才可以

此文关键点:

当页面只有一个input的时候,点击enter会自动提交表单并且刷新页面

以上!

上一篇 下一篇

猜你喜欢

热点阅读