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



  • 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.



  • @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”.



  • @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 .


Log in to reply