q-select map-options and filter is not working together well

[turigeza]

Would somebody be able to point out what I am messing up. Or is this a bug? Basically I would expect never to see the value displayed in q-select. Yet when I load the page this is exactly what happens. One sees the value of the model instead of a label. In this case 'goog'.

Please see pen
https://codepen.io/turigeza/pen/QPObae?editors=1010

Any idea ? Thank you !

Btw all I am trying to achieve is how a native html select would work. I need to see labels displayed and values used for the model. I also need to be able to jump to the option when I type or filter in this case.

[spyke113]

https://github.com/quasarframework/quasar/issues/3797

[turigeza]

@spyke113 Thank you for suggesting the computed property in your pen here:
https://codepen.io/spyke113/pen/bJEyEJ

So the solution is to use a computed property for the model with a getter and setter.
This is what I was after a simple select with a search box which uses key value pairs for its options.
https://codepen.io/turigeza/pen/rbpLRJ

IMO this is such a common use case it should be one of the examples in the docs. No?

[prashant]

I created a Base component for q-select with map option but can’t set the default value to it can any one check what is the issue.?

https://codesandbox.io/s/little-hooks-c3nsk?file=/src/pages/SelectMap.vue