如何在 vuejs 中將 li 標簽的 maxlength 設置為 5？

Question

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

 <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>

我想為 li 標簽設置 maxlength，這樣只有用戶才能在搜索歷史記錄中存儲 5 個項目。

基本上我正在嘗試創建輸入字段，如果用戶鍵入任何字符，則在輸入字段中，類型字符將存儲在列表中。

所以對於 li，我想保持在 selectPreviousSearch 中只存儲 5 個項目的條件。

Answer 1

方法一：

v-for="(item, index) in searchHistory.slice(searchHistory.length-5)

selectPreviousSearch(index) {
    index += searchHistory.length-5;
    index = index<0?0:index;
    this.search = this.searchHistory[index];
    this.showSearchHistory = false;
 },

方法 2：更改 function 以保留您存儲 searchHistory 的最后 5 個輸入。

onChange(newInput){
    searchHistory.length >=5 && searchHistory.shift();
    searchHistory.push(newInput);
}

Answer 2

如果要顯示最近的 5 個條目，從most recent到least recent的排序，您可以嘗試

v-for="(item, index) in searchHistory.slice(-5).reverse()"

---

由taneeru dhanunjay編輯

@keydown.space="preventLeadingSpace"
 preventLeadingSpace(e) {
      // only prevent the keypress if the value is blank
      if (!e.target.value) e.preventDefault();
      // otherwise, if the leading character is a space, remove all leading white-space
      else if (e.target.value[0]==' ') e.target.value = e.target.value.replace(/^\s*/, "");
    },