[Vuejs]-How to type and filter in a dropdown select in vue

by

0👍

If i get right, you want to filter options list. Bind v-model to your search input.

<input ... v-model='searchFor' />

and watch it

methods: {
  search() {
    this.options.filter(category => category.toLowerCase().match('this.searchFor.toLowerCase()'))
  }
}

watch: {
  searchFor() {
     this.search()
  }
}

This will filter when user type something but when user remove something that want to search you should improve. Like:

data() {
  return {
    ...
    optionsCopy: [], // Always have first unchanged array
    searchForCopy: '',
  }
}

When user remove something in searchFor you should keep track this.

watch: {
  searchFor() {
     if (this.searchFor.length > this.searchForCopy) {
        this.search()
     } else {
        this.options = this.optionsCopy
        this.search()
     }
     this.searchForCopy = this.searchFor
  }
}

If i understand right your problem. You should solve your problem something like above code way.

Leave a comment