Vue input輸入框回車以后自動(dòng)刷新頁(yè)面(直播程序)
直播程序，Vue input輸入框回車以后自動(dòng)刷新頁(yè)面
解決方案：
可以在標(biāo)簽上添加 @submit.native.prevent。
<br><el-form label-position="top" size="mini" :inline="true" :disabled="disabledByExtract" @submit.native.prevent><br> <br> <el-input v-model="scanInput.scanResult.value" :text.sync="scanInput.scanResult.text" <br> :disabled="!item.organizationId || disabledByExtract" <br> @change="handleProductSkuScanChange"> <br> </el-input><br> <br></el-form>
以上就是直播程序，Vue input輸入框回車以后自動(dòng)刷新頁(yè)面。
補(bǔ)充：vue el-input 使用 回車鍵會(huì)刷新頁(yè)面的問題
場(chǎng)景：
vue項(xiàng)目中 在輸入框輸入字符并按下回車鍵搜索時(shí)，不會(huì)進(jìn)行搜索， 而是會(huì)刷新頁(yè)面
原因：
當(dāng)form表單中只有一個(gè)input時(shí)，按下回車建會(huì)自動(dòng)觸發(fā)頁(yè)面的提交功能， 產(chǎn)生刷新頁(yè)面的行為
解決：
如下代碼，在 el-form 中 加個(gè) @submit.native.prevent，就可以了，@submit: 表單提交.native 綁定系統(tǒng)原生事件.prevent 提交以后不刷新頁(yè)面
<el-form
:model="goodsListTab.queryParams"
ref="queryForm"
:inline="true"
v-show="true"
@submit.native.prevent
>
<el-form-item label="品名" prop="baseName" >
<el-input
v-model="goodsListTab.queryParams.baseName"
placeholder="請(qǐng)輸入品名"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery" >搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery" >重置</el-button>
</el-form-item>
</el-form>到此這篇關(guān)于Vue input輸入框回車以后自動(dòng)刷新頁(yè)面(直播程序)的文章就介紹到這了,更多相關(guān)Vue input輸入框回車自動(dòng)刷新頁(yè)面內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue生命周期中的組件化，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
vue移動(dòng)端輕量級(jí)的輪播組件實(shí)現(xiàn)代碼
這篇文章主要介紹了vue移動(dòng)端輕量級(jí)的輪播組件實(shí)現(xiàn)代碼，一個(gè)簡(jiǎn)單的移動(dòng)端卡片滑動(dòng)輪播組件，適用于Vue2.x。本文給大家?guī)砹藢?shí)例代碼，需要的朋友參考下吧2018-07-07
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,適合用于構(gòu)建單頁(yè)面應(yīng)用,下面這篇文章主要給大家介紹了關(guān)于降低vue-router版本的2種解決方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
基于elementUI實(shí)現(xiàn)圖片預(yù)覽組件的示例代碼
這篇文章主要介紹了基于elementUI實(shí)現(xiàn)圖片預(yù)覽組件的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
Vue利用openlayers實(shí)現(xiàn)點(diǎn)擊彈窗的方法詳解
點(diǎn)擊彈窗其實(shí)就是添加一個(gè)彈窗圖層，然后在點(diǎn)擊的時(shí)候讓他顯示出來罷了。本文將利用openlayers實(shí)現(xiàn)這一效果，快跟隨小編一起學(xué)習(xí)一下吧2022-06-06
vue代理請(qǐng)求之Request?failed?with?status?code?404問題及解決
這篇文章主要介紹了vue代理請(qǐng)求之Request?failed?with?status?code?404問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
vite.config.ts如何加載.env環(huán)境變量
這篇文章主要介紹了vite.config.ts加載.env環(huán)境變量方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue項(xiàng)目接口管理,所有接口都在apis文件夾中統(tǒng)一管理操作
這篇文章主要介紹了vue項(xiàng)目接口管理,所有接口都在apis文件夾中統(tǒng)一管理操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了Vue整合AdminLTE模板的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
Element Plus實(shí)現(xiàn)Affix 固釘
本文主要介紹了Element Plus實(shí)現(xiàn)Affix 固釘，Affix組件用于將頁(yè)面元素固定在特定可視區(qū)域，文中通過示例代碼介紹的非常詳細(xì)，感興趣的小伙伴們可以參考一下2021-07-07