Vue中form表单提交问题
关于input组件回车后,默认提交form表单出现的问题:<div class="searchArea"><form action="###" class="searchForm"><inputv-model="keyword"id="autocomplete"class="input-error input-xxlarge"@ke
关于input组件回车后,默认提交form表单
出现的问题:
<div class="searchArea">
<form action="###" class="searchForm">
<input
v-model="keyword"
id="autocomplete"
class="input-error input-xxlarge"
@keyup.enter="goSearch"
/>
<button
class="sui-btn btn-xlarge btn-danger"
type="button"
@click="goSearch"
>
搜索
</button>
</form>
</div>
在输入框输入数据敲回车后,触发表单的默认提交,地址栏会根据form的action改变,重新刷新表单。
原因:
官网上的例子如果存在多个表单选项,输入回车后并不会触发submit
,而出现单个input组件的时候,聚焦input后按回车就会触发自动提交。
解决方法:
一,html中的form:
<div class="searchArea">
<form action="###" class="searchForm">
<input
v-model="keyword"
id="autocomplete"
class="input-error input-xxlarge"
@keyup.enter="goSearch"
/>
<!-- 多加一个input框会阻止form的默认行为,或者在form中阻止默认行为 -->
<input hidden />
<button
class="sui-btn btn-xlarge btn-danger"
type="button"
@click="goSearch"
>
搜索
</button>
</form>
</div>
<div class="searchArea">
<!--在form中阻止默认行为-->
<form action="###" class="searchForm" @submit.prevent>
<input
v-model="keyword"
id="autocomplete"
class="input-error input-xxlarge"
@keyup.enter="goSearch"
/>
<button
class="sui-btn btn-xlarge btn-danger"
type="button"
@click="goSearch"
>
搜索
</button>
</form>
</div>
二,el-form中的form
在标签上加@submit.native.prevent
参考链接:
//el-form
https://github.com/ElemeFE/element/issues/3625
//form
https://www.cnblogs.com/jiajia-hjj/p/15731493.html
//自定义标签
https://blog.csdn.net/qq_29468573/article/details/80771625?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1.pc_relevant_antiscanv2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1.pc_relevant_antiscanv2&utm_relevant_index=2
更多推荐
所有评论(0)