Quasar simple filter select can't filter and emit for dynamic data-CodePudding

I am trying to have a select with simple filtering system. I am getting the initial list in the select input. But while clicking on the select input and writing keywords in order to filter, it's giving the following error and does not filter anything :

Uncaught TypeError: v.toLowerCase is not a function

For this I am using the following codes:

From Template:

<div >
    <q-item-label >Division </q-item-label>
    <q-select filled dense v-model="input.division" use-input hide-selected input-debounce="0" 
      label="Select an Option" :options="options" @filter="filterFn" option- 
     value="id" option-label="name" emit-label>
         <template v-slot:no-option>
             <q-item>
                 <q-item-section >
                     No results
                 </q-item-section>
             </q-item>
         </template>
     </q-select>
 </div>

From Script :

<script>
  import {
    ref
  } from 'vue'

  export default {
     setup() {
        return {
           options: ref([]),
        }
  },

  methods: {
      getDivisions() {
         this.$axios.get('https://api.bdshsystem.com/public/api/v1/area').then(response => {
            Object.keys(response.data.divisions).forEach(key => {
                this.options = response.data.divisions
            })
        })
    },

    filterFn(val, update) {
        if (val === '') {
            update(() => {
                  console.log(this.getDivisions())
                  this.options = this.options

                // here you have access to "ref" which
                // is the Vue reference of the QSelect
                })
                return
            }

            update(() => {
                const needle = val.toLowerCase()
                this.options = this.options.filter(v => v.toLowerCase().indexOf(needle) > -1)
            })
        }
    },

    mounted() {
        this.getDivisions()
    }
}
</script>

CodePudding user response：

Your options values are objects, not strings. So in filtering, you should consider that.

this.options = this.options.filter(v => v.name.toLowerCase().indexOf(needle) > -1)