如何在 vuejs 中按下按鈕時刪除空間？

Question

 processSearch() { if ( this.searchHistory.indexOf(this.search) === -1) { this.searchHistory.push(this.search); } this.search = ''; },

 <button type="button" class="btn btn-primary search-icon" @click="processSearch"> <i class="fa fa-search"></i> </button>

 <input class="form-control bg-light-blue" id="SearchText" type="text" v-model="search" @keydown.enter = 'enter' @click="onClick" @keyup.enter="processSearch" @input = 'change' @keyup="inputChanged" @keydown.down="onArrow" @keydown.up="onArrow" /> <ul class="list-group" v-if="showSearchHistory"> <li class="list-group-item" v-for="(item, index) in searchHistory":key="index" @click="selectPreviousSearch(index)">{{ item }}</li> </ul>

 selectPreviousSearch(index) { this.search = this.searchHistory[index]; this.showSearchHistory = false; },

我在搜索中使用了上面的按鈕，當我在搜索中添加一些內容並單擊按鈕時，它將顯示為搜索歷史，但問題是如果我直接單擊上面的搜索按鈕，搜索中會反映一些空間歷史。 因此，如果直接單擊按鈕，我想從搜索歷史記錄中刪除空格。

Answer 1

您的搜索歷史記錄應包含不包括空格和空格字符串的列表。 為此，您可以使用trim 。

processSearch() {
        if (  this.searchHistory.indexOf(this.search) === -1 && this.search.trim().length>0) {
          this.searchHistory.push(this.search);
        }
        this.search = '';
       
      },

您可以添加條件： this.search.trim().length>0