[Vuejs]-Using Trim method how to remove space/enter in vuejs?

by

0👍

✅

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 = '';
         } 
 }

0👍

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>

Leave a comment