使用 Trim 方法如何在 vuejs 中删除 space/enter？

Question

 processSearch() {
        this.search.trim().length>0;
        // this.searchHistory.push(this.search);
        this.search = ''; 
      },

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*/, "");
      },

 <input
          
          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"
          @keydown.space="preventLeadingSpace"
         
        />


<ul class="list-inline" >
    
      <li
        class="list-inline-item list-group-item-primary"
        v-for="(item, index) in searchHistory
          .slice(-5)
          .reverse()
          .map((s) => s.trim())"
        :key="index"
        @click="selectPreviousSearch(index)"
      >
        {{ item }}
      </li>

    </ul>

this.search.trim().length>0

// tried using this to stop enter, But doesn't work.

我正在尝试执行搜索功能，如果用户在搜索中输入任何内容，结果将以 li 显示。现在的问题是，即使我没有输入任何数据，只需单击键盘上的回车键，结果也会显示在 li 中。

第二个问题是，如果点击输入，显示下拉菜单。但是当我在输入下拉菜单之外单击时，它没有关闭。

Answer 1

删除空格，或trim输入，Vue想出了这样的功能。您可以使用 v-model.trim 试试这个：

<form @submit.prevent="processSearch">
<input
          id="SearchText"
          type="text"
          v-model.trim="search"
          @keydown.enter="enter"
          @click="onClick"
          @input="change"
          @keyup="inputChanged"
          @keydown.down="onArrow"
          @keydown.up="onArrow"
          @keydown.space="preventLeadingSpace"
         
        />
</form>

然后你的 processSearch 函数：

processSearch() {
       if(this.search){
            this.searchHistory.push(this.search); this.search = '';
         } 
 }

Answer 2

让我来帮助您避免 <li> 项上的重复项

.... 
data(){
    return{
    items: [], 
    search: "" 
} 
}, methods:{
processSearch() {
       if(this.search){
            this.searchHistory.push(this.search); this.search = '';
           if(this.items.indexOf(this.search) === -1){
        this.items.push(this.search)
        } 
         } 
 } 
}
....

现在在您的列表中

<ul class="list-inline"  >
    
      <li
        class="list-inline-item list-group-item-primary"
        v-for="(item, index) in items
          .slice(-5)
          .reverse()
          .map((s) => s.trim())"
        :key="index"
       ..... 
      >
        {{ item }}
      </li>

    </ul>

使用 Trim 方法如何在 vuejs 中删除 space/enter？

Using Trim method how to remove space/enter in vuejs?

javascript

vue.js

trim