el-input回车会自动刷新页面原因及解决方法

el-input回车会自动刷新页面原因及解决方法

问题原因:

form表单中只有一个输入框的时候,在输入框中按下回车就是提交该表单并且会自动刷新页面。知道原因就好解决了。

解决方法:

在<el-form>上加上@submit.native.prevent来阻止原始提交事件,就是阻止默认刷新页面,但回车事件依旧会触发。

 <el-form @submit.native.prevent>
 </el-form>

方法解释:

  @submit.native.prevent

   submit 顾名思义就是提交

  .native 表示对一个组件绑定系统原始事件

  .prevent 表示提交以后不刷新页面

el-input 绑定键盘enter事件

<el-input type="textarea" class="talk-textarea" v-model="message"
          @keyup.enter.native="enterFun">
</el-input>

 

posted @ 2023-05-15 15:44  LALAYU  阅读(464)  评论(0编辑  收藏  举报