Add /Extend q-select auto self-filter prop ( similar to default v0.17 ) ?

[amex]

Would be glad if someone can explain how to add/extend this functionality lets call this propsself-filter by using the similar {lable:'xxx', value:01} style of :optionsprop . I am sure it is not only me who will run into this. As the number of q-select components we use grow it is no longer feasible to add one generic filter per q-select and computed functions.

[metalsadman]

@amex Extend QSelect component that you want to use your self-filter props, then use this extended component across your app whenever you need it. Sample https://codesandbox.io/s/0ybb3, Open Drawer -> Click “Select Sample”.

[amex]

@metalsadman .

Thank you for the example. Took me a while to figure out a few quirks with the q-select props.

for anyone looking for this … you can check @metalsadman provided sandbox above , he has done all the work . I want to add few comments for beginners like me .

$ quasar new c BaseSelect your custom extended component from quasar ( here is where we will customize the q-select in my case )
add index.js to export your component

import BaseSelect from './BaseSelect.vue'
export { BaseSelect }

next mount it to your vue boot
$ quasar new b base-select
register the component in your new boot file

import * as BaseComponents from 'components'
// leave the export, even if you don't use it
export default async ({ app, router, Vue }) => {
  // Globally register the components

  Object.keys(BaseComponents).map(v => {
    Vue.component(v, BaseComponents[v])
  })
}

final step is to go to your quasar.conf.js and add this boot file ( named in quasar new b xxx ) in the boot list array .
for q-select>> Few things i run into is to notice or take care ( not to mix multiple prop , on a string data model for q-select) ,
This way is more expressive and saves lots of time if you need to use the same props over and over again .