vue中form表单支持回车键提交踩坑

平时我们项目中的列表页面通常都有条件搜索,为了使用方便通常都会支持回车搜索.

此功能的实现普遍做法是:为form表单添加 @keydown.enter.native="自定义方法名称"
然后在方法触发时判断keyCode是否等与13 如果是13则证明触发了回车键

例如:

<Form :label-width="100" :model="searchForm" inline ref="searchForm" @keydown.enter.native="searchEnterFun" @submit.native.prevent>
   <FormItem label="搜索关键词：" prop="keyword">
      <Input clearable placeholder="支持模糊搜索" style="width: 200px" type="text" v-model="searchForm.keyword"/>
   </FormItem>
   <FormItem style="margin-left: -75px">
      <Button @click="handleSearch" icon="md-search" type="primary">搜索</Button>
      <Button @click="handleResetSearch">重置</Button>
   </FormItem>
</Form>

searchEnterFun(e) {
  //which 和 keyCode 属性提供了解决浏览器的兼容性的方法。
   //keyCode属性返回onkeypress事件触发的键的值的字符代码，或者 onkeydown 或 onkeyup 事件的键的代码
   var keyCode = window.event? e.keyCode:e.which;
   if (keyCode == 13) {
       this.getCustomList();  //搜索事件
   }
},

嗯,回车触发表单提交的实际应用就简单介绍这么多,接下来我们来说说这里面的坑

1.使用vue开发，页面文本框在点击回车时会刷新页面，而且只有第一次会触发刷新。
2.回车后页面进行了刷新并且在跳转 URL中也多出了 ?
3.再次回车查询正常，不会刷新了
那么我们来说说产生此bug的原因以及解决方案

bug原因:在当前页面元素中只有一个文本框时，点击回车时会自动提交表单；

资料依据:

W3C 标准中有如下规定：

1. When there is only one single-line text input field in a form,

2. the user agent should accept Enter in that field as a request to submit the form.

3. 当表单中只有一个单行文本输入框时，客户端应该接受该区域中的Enter作为提交表单的请求

解决方案:

在FORM标签中加入@SUBMIT.NATIVE.PREVENT阻止事件即可

大家仔细看我最上面的示例代码不难发现本人已经添加,实在是这个坑跌的我差点爬不出来!!!

因此特做此纪录,防止自己重复跌坑,也方便给已经跌坑的道友扔出"希望之梯"......