問題描述:我的頁面表單中除了兩個(gè)按鈕之外只有一個(gè)input框,在觸發(fā)input框的enter事件之后,頁面會(huì)刷新并且url會(huì)多一個(gè)"?"
前后url對(duì)比:
http://localhost:8082/#/test
http://localhost:8082/?#/test
問題代碼如下:
<el-form inline label-width="126px" class="disFlex" size="mini">
<el-form-item label="指標(biāo)類型名稱" prop="name">
<el-input v-model="targetTypeName" placeholder="請(qǐng)輸入指標(biāo)類型名稱"></el-input>
</el-form-item>
<el-form-item class="flex1 textAlignR">
<el-button type="primary" @click="searchForm">查詢</el-button>
<el-button @click="resetForm">重置</el-button>
</el-form-item>
</el-form>
解決方案:el-from 加上 @submit.native.prevent
<el-form inline label-width="126px" class="disFlex" @submit.native.prevent size="mini">
<el-form-item label="指標(biāo)類型名稱" prop="name">
<el-input v-model="targetTypeName" placeholder="請(qǐng)輸入指標(biāo)類型名稱"></el-input>
</el-form-item>
<el-form-item class="flex1 textAlignR">
<el-button type="primary" @click="searchForm">查詢</el-button>
<el-button @click="resetForm">重置</el-button>
</el-form-item>
</el-form>
原因
當(dāng)一個(gè) form 元素中只有一個(gè)輸入框時(shí)蛔添，在該輸入框中按下回車應(yīng)提交該表單竟坛。如果希望阻止這一默認(rèn)行為刹孔，可以在 標(biāo)簽上添加 @submit.native.prevent折汞。
參考自這里
