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

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

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

Vue按回車鍵進行搜索

需求：

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

第一種方法

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

<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 //這句話禁止第一次進入頁面回車搜索的時候刷新頁面

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

Vue使用回車鍵失效的解決

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

Vue回車鍵事件

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

@keyup.enter="方法名"

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

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

栗子

<el-form-item label="名稱" prop="taskName">
        <el-input
          v-model="queryParams.taskName"
          placeholder="請輸入名稱"
          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 標準中有如下規(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.

即：當一個 form 元素中只有一個輸入框時，在該輸入框中按下回車應提交該表單。如果希望阻止這一默認行為，可以在 <el-form> 標簽上添加 @submit.native.prevent。

解決方法

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