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