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項目中在輸入框輸入字符并按下回車鍵搜索時，不會進行搜索，而是會刷新頁面

原因：
當form表單中只有一個input時，按下回車建會自動觸發(fā)頁面的提交功能，產生刷新頁面的行為

解決：
如下代碼，在 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>

到此這篇關于Vue input輸入框回車以后自動刷新頁面(直播程序)的文章就介紹到這了,更多相關Vue input輸入框回車自動刷新頁面內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: