Vue按回車鍵進(jìn)行搜索的實(shí)現(xiàn)方式

更新時(shí)間：2023年01月14日 14:36:38 作者：阿wei程序媛

這篇文章主要介紹了Vue按回車鍵進(jìn)行搜索的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

Vue按回車鍵進(jìn)行搜索

需求：

為了用戶方便進(jìn)行搜索數(shù)據(jù)的時(shí)候不想點(diǎn)擊搜索按鈕，想要在input輸入框內(nèi)輸入完成之后直接按回車鍵進(jìn)行搜索

第一種方法

在input標(biāo)簽內(nèi)部增加@keyup.enter事件即可，事件名為按鈕點(diǎn)擊名稱

<div class="center">
? ? ? <input placeholder="輸入名稱" v-model="keyword"
? ? ? ? ? ? ?@keyup.enter="getsearchdata">
</div>
<div class="seal" @click="getsearchdata">搜索</div>

第二種方法

<div class="center">
? ? ? <input placeholder="輸入名稱" v-model="keyword"
? ? ? ?@keyup.enter.native="getsearchdata" @submit.native.prevent
? ? ? >
</div>
<div class="seal" @click="getsearchdata">搜索</div>?

注：

@keyup.enter.native="getsearchdata"http://這里要和搜索的事件名稱一樣

@submit.native.prevent //這句話禁止第一次進(jìn)入頁面回車搜索的時(shí)候刷新頁面

這兩種方法，都能實(shí)現(xiàn)按回車鍵進(jìn)行搜索的功能

Vue使用回車鍵失效的解決

在用Vue開發(fā)一個(gè)前端頁面，做的一個(gè)搜索功能，目標(biāo)：輸入搜索條件后，回車鍵直接搜索。但是得到的結(jié)果卻是系統(tǒng)刷新，并沒有搜索。這是為啥呢？對(duì)比了其他文件，代碼沒有錯(cuò)，一臉懵。后來查閱資料才發(fā)現(xiàn)錯(cuò)誤，下面介紹解決方法~

Vue回車鍵事件

對(duì)于原生的Vue來說，要綁定回車（enter）事件，只需要：

@keyup.enter="方法名"

而如果用了類似于Element UI之類的第三方UI框架的話，則得在后面加【.native】修飾符：

@keyup.enter.native="方法名"

栗子

<el-form-item label="名稱" prop="taskName">
        <el-input
          v-model="queryParams.taskName"
          placeholder="請(qǐng)輸入名稱"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
</el-form-item>
 
<el-form-item>
    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
</el-form-item>

回車失效原因

查考相關(guān)文檔得知：

W3C 標(biāo)準(zhǔn)中有如下規(guī)定：

When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.

即：當(dāng)一個(gè) form 元素中只有一個(gè)輸入框時(shí)，在該輸入框中按下回車應(yīng)提交該表單。如果希望阻止這一默認(rèn)行為，可以在 <el-form> 標(biāo)簽上添加 @submit.native.prevent。

解決方法

<el-form> 標(biāo)簽上添加 @submit.native.prevent。
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px" @submit.native.prevent>