[v1] Filter feature in QSelect



  • Hello all,

    I’m migrating all my apps from v0.17.* to the latest version of Quasar and all runs fine.

    The problem is the new way to use filter functions for QSelects: before, I could to use the same method to filter all qselects values, through the :filter prop ( like this: https://codepen.io/diegomagikal/pen/QoadEV).

    But now (in V1), with @filter is necessary modify an object previously defined (https://codepen.io/diegomagikal/pen/NJXjRd) to do the same (in this example, the stringOptions const).

    So I’ll have to create a separate object with filterable options for each qselect on my page. Is there any way around this? Thanks in advance.



  • Hi all. This is quite a “downgrade” IMHO.

    Having the old :filter=“true” used to do the job for the vast majority of the needs.

    In my case, with a dynamic form where components are only known when they’re needed, I do not have the “data” under my control as it is dynamic and change from form to form.

    The filterfn example assumes a known “stringOptions” to be present, but with dynamic forms you simply dont have this.

    Any way to get the old behaviour back?

    Thanks



  • I too have been trying to get QSelect to work without having to write a new filter for each select. Very tedious and error prone. I have been posting my woes over on the Discord channel too, regarding adding a new value and acceptinging it with tab key instead of return then tab. I tried to see if we could even get a new QAutocomple or other such functionality. Hopefully there will be a better solution than the current QSelect option. At this point, I feel I’m going to have to create my own Vue component for this. I have a person add/edit dialog that is already over 600 lines if code. Mostly for redundant filterFN for each QSelect. It appears that QSelect is really only intended for simple arrays of strings. It gets really cranky if it receives as options data it doesn’t expect. Which really complicates code. However, that said, I may be expecting too much from the tool and should be using something else or destructuring my source data using …map() perhaps but there, again, not dynamic. Sorry this sounds like a rambling rant, it really isn’t. I love Quasar. I need better a Vue and JS skillset.



  • @bjbk said in [v1] Filter feature in QSelect:

    I feel I’m going to have to create my own Vue component for this. I have a person add/edit dialog that is already over 600 lines if code.

    This kinda answer the op’s question too, making a custom component of q-select. when you feel like you’ll have to repeat a code over and over again, consider making a component out of it. This what makes Vue amazing https://vuejs.org/v2/guide/components.html, props down, events up if that’s not enough there’s vuex.


Log in to reply