[Vuejs]-V-autocomplete reverse order of the filtered results

by

0👍

I would use two arrays, one maintains the original values and sorting order, the other is bound to the v-autocomplete and is a filtered version of the original array based on whatever the search text is.

<v-autocomplete
  v-model="select"
  :items="items"
  :search-input.sync="filter"
  label="Filter"
></v-autocomplete>

data () {
  return {
    select: null,
    filter: null,
    items: [],
    values: ['1.11', '1.10', '1.9', '1.6', '1.1'],
  }
},
watch: {
  filter (val) {
    val && val !== this.select && this.querySelections(val)
  },
},
methods: {
  querySelections (v) {
    this.items = this.values.filter(i => i.includes(v)).reverse()
  }
},

codepen

You have to use string values for values array, otherwise JavaScript automatically strips the trailing 0 from numbers like 1.10 so it becomes 1.1.

Leave a comment