使用 Trim 方法如何在 vuejs 中删除空格/输入？

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.

I am trying to do the search functionality,If user enter anything in the search, result will be displayed in li. Now the issue is, even without entering any data simply if i click on enter key from the keyboard, then also it is showing as result in li.

Second issue is, If is click on input, dropdown is displaying. But when i click outside of input dropdown is not closing.

Answer 1

To remove the white spaces, or to trim the input, Vue come up with such functionality. You can use v-model.trim try this:

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

Then your processSearch function:

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

Answer 2

Let me help you on how to avoid duplicates on your <li> items

.... 
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)
        } 
         } 
 } 
}
.... 

Now on your lists

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