刘勇虎的官方网站

最近使用vue开发遇到了一个有趣的问题，页面文本框在点击回车时会刷新页面，而且只有第一次会触发刷新，问题代码如下：

<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px" >
<el-form-item label="账号描述" prop="description">
<el-input
v-model="queryParams.description"
placeholder="请输入账号描述"
clearable
size="small"
style="width: 240px"
@keyup.enter.native="handleQuery"
/>
</el-form-item>

点击回车按钮后不仅页面会刷新，并且路由多了一个问号

http://localhost:8088/personal/account?

经查阅资料得知原因，在当前页面元素中只有一个文本框时，点击回车时会自动提交表单；

W3C 标准中有如下规定：

When there is only one single-line text input field in a form, 
the user agent should accept Enter in that field as a request to submit the form.
当表单中只有一个单行文本输入框时，客户端应该接受该区域中的Enter作为提交表单的请求

解决方案: 在 form标签中加入@submit.native.prevent 阻止事件即可：

<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px" @submit.native.prevent>                  
<el-form-item label="账号描述" prop="description">
<el-input
v-model="queryParams.description"
placeholder="请输入账号描述"
clearable
size="small"
style="width: 240px"
@keyup.enter.native="handleQuery"
/>
</el-form-item>

参考
http://www.manongjc.com/detail/64-epyueiyzfocuucq.html