element input第一次回车刷新页面问题

我们在input中加上键盘回车事件@keyup.enter.native,如下:

 <el-form ref="form" :inline="true" :model="form" label-width="100px">
      <el-input style="float: right" v-model="form.keyword"  placeholder="筛选关键词"  class="handle-input mr10" @keyup.enter.native="search"></el-input>
  </el-form>

偶然间发现,只要是第一次来到页面,想通过回车快速搜索关键字,必定引发页面刷新。
分析后,发现原因如下:
form内只有一个输入框时,按回车会自动提交

解决办法:

阻止form的默认事件。
即在form上加上这句话:@submit.native.prevent
代码如下:

 <el-form ref="form" :inline="true" :model="form" label-width="100px" @submit.native.prevent>
      <el-input style="float: right" v-model="form.keyword"  placeholder="筛选关键词"  class="handle-input mr10" @keyup.enter.native="search"></el-input>
  </el-form>

猜你喜欢

转载自blog.csdn.net/weixin_37221852/article/details/84060727
今日推荐