Vue input輸入框回車(chē)以后自動(dòng)刷新頁(yè)面(直播程序)

更新時(shí)間：2023年01月28日 14:20:21 作者：云豹科技-蘇凌霄

這篇文章主要介紹了直播程序，Vue input輸入框回車(chē)以后自動(dòng)刷新頁(yè)面,適用場(chǎng)景是在輸入框輸入字符并按下回車(chē)鍵搜索時(shí)，刷新頁(yè)面，需要的朋友參考下實(shí)現(xiàn)代碼

直播程序，Vue input輸入框回車(chē)以后自動(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輸入框回車(chē)以后自動(dòng)刷新頁(yè)面。

補(bǔ)充：vue el-input 使用回車(chē)鍵會(huì)刷新頁(yè)面的問(wèn)題

場(chǎng)景：
vue項(xiàng)目中在輸入框輸入字符并按下回車(chē)鍵搜索時(shí)，不會(huì)進(jìn)行搜索，而是會(huì)刷新頁(yè)面

原因：
當(dāng)form表單中只有一個(gè)input時(shí)，按下回車(chē)建會(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輸入框回車(chē)以后自動(dòng)刷新頁(yè)面(直播程序)的文章就介紹到這了,更多相關(guān)Vue input輸入框回車(chē)自動(dòng)刷新頁(yè)面內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue實(shí)現(xiàn)穿梭框效果
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)穿梭框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-09-09
基于Vue3實(shí)現(xiàn)百度地圖位置選擇器組件
在開(kāi)發(fā)前端應(yīng)用時(shí),地圖選擇器是一個(gè)非常常見(jiàn)的需求,本文將一步步展示如何使用?Vue?3?和?Element?Plus?來(lái)實(shí)現(xiàn)一個(gè)百度地圖位置選擇器組件,有需要的可以參考一下
2025-04-04
Vue3前端做打印頁(yè)面信息實(shí)現(xiàn)打印功能(打印界面某個(gè)部分)
這篇文章主要介紹了如何使用vue3-print-nb依賴(lài)在Vue?3項(xiàng)目中實(shí)現(xiàn)頁(yè)面打印功能,提供了完整的代碼示例,大家可以根據(jù)項(xiàng)目需求選擇合適的打印方法,需要的朋友可以參考下
2025-02-02
vue和react的區(qū)別及優(yōu)缺點(diǎn)解讀
這篇文章主要介紹了vue和react的區(qū)別及優(yōu)缺點(diǎn)說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-03-03
vue3應(yīng)用elementPlus table并滾動(dòng)顯示問(wèn)題
這篇文章主要介紹了vue3應(yīng)用elementPlus table并滾動(dòng)顯示問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-12-12
vue-cli+webpack項(xiàng)目修改項(xiàng)目名稱(chēng)的方法
下面小編就為大家分享一篇vue-cli+webpack項(xiàng)目修改項(xiàng)目名稱(chēng)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-02-02
Vue.js每天必學(xué)之內(nèi)部響應(yīng)式原理探究
Vue.js每天必學(xué)之內(nèi)部響應(yīng)式原理探究，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-09-09
Vue編寫(xiě)多地區(qū)選擇組件
這篇文章主要為大家詳細(xì)介紹了Vue編寫(xiě)一個(gè)挺靠譜的多地區(qū)選擇組件的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-08-08
Vue.js快速入門(mén)實(shí)例教程
vue是法語(yǔ)中視圖的意思，Vue.js是一個(gè)輕巧、高性能、可組件化的MVVM庫(kù)，同時(shí)擁有非常容易上手的API。這篇文章主要介紹了Vue.js快速入門(mén)實(shí)例教程的相關(guān)資料,需要的朋友可以參考下
2016-10-10
淺談VUE uni-app 常用API
這篇文章主要介紹了uni-app 常用API，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2021-10-10