美文网首页前端问题集
vue input输入框 回车会刷新页面解决办法

vue input输入框 回车会刷新页面解决办法

作者: 一个健康马 | 来源:发表于2021-03-03 13:53 被阅读0次

问题描述:
在vue项目开发时,运用element-ui或者iView组件的Form组件;当Form组件中只有一个Input组件时,鼠标聚焦输入框后,点击回车键,页面就会刷新。例如以下代码:

<Form :model="form">
  <FormItem prop="username">
      <Input v-model="form.username" placeholder="请输入姓名"></Input>
  </FormItem>
</Form>
阻止默认行为,在组件Form上添加@submit.native.prevent

<Form :model="form" @submit.native.prevent>
    <FormItem prop="username">
        <Input v-model="form.username" placeholder="请输入姓名"></Input>
    </FormItem>
</Form>

相关文章

网友评论

    本文标题:vue input输入框 回车会刷新页面解决办法

    本文链接:https://www.haomeiwen.com/subject/oruqqltx.html