q-select disable an option (solved)

[mattabdi]

Since q-select controls the options, how would I show but disable an option? For example: <option value="volvo" disabled>Volvo</option>

[s.molinari]

@mattabdi - I don’t see a way to get this done. I’d say start an issue on Github with the suggestion. But, before you do, maybe one of the other team members can confirm?

Scott

[s.molinari]

Correction. It’s simple. Just add disable: true in the object for that particular option.

http://jsfiddle.net/smolinari/xfkj5e36/

Scott

[mattabdi]

Works, Ty!

[s.molinari]

Oh, and I’ve put in a PR in the docs to note this litte nice option to the options.

Scott

[Hawkeye64]

Since most of the Quasar Framework elements may or may not wrap an actual HTML element, the Quasar way is disable which it either passes on or does the additional work.

<!-- Disabled state -->
  <q-select
  disable
  float-label="Disabled Select"
  multiple
  v-model="multipleSelect"
  :options="selectOptions"
/>

[s.molinari]

@Hawkeye64 - He was talking about disabling an option within the options list.

Scott

[Hawkeye64]

Wouldn’t be the first time my mind raced ahead of itself. Yes, disabling an options would be nice.

[Hawkeye64]

I typically have my options using a switch, to turn on/off items. I’ve never had an outright reason for a complete disable.

[s.molinari]

Well, it is simple to do. Just add the “disable: true” prop to the options object that should be disabled. l also added this nugget of info to the QSelect docs, since it was missing.

PR is pending.

Scott

[dgk]

@rstoenescu
One wonders what other undocumented props there are, for options in particular. How about hidden:true ? as a companion to disable.

I tired it in the fiddle above and… no go

In my use case it would be a pain to keep recreating the options list for every context (i.e. used on multiple pages) if one member of the list is not applicable to that context.

Better would be to leave the option set members alone and simply set a hidden:true per context.

In the meantime I can use disable. Users will see it but at least they can’t choose it.

[s.molinari]

@dgk - You are the master of your data and in control of it. You could simply filter the data out of the select options array, effectively hiding that data from the user.

Scott

[dgk]

I love it…a programmer saying “you can ‘simply’”.

Yes I can do that. As I explained it would be a pain to do that. It means I must rebuild that object for each specific page over and over from scratch as it’s used many places through out the site. In a super bad case I’d have to do that twice on the same page. If I could hide/remove in the dom instead then it’s just way way easier. disable already exits why not hide. Guess it’s on me to modify the component to my liking, but could be in the mix for future releases.

[s.molinari]

It means I must rebuild that object for each specific page over and over from scratch

I think you can be a bit smarter about that. Yes, the object needs to be rebuilt. But, from scratch? I think not. You’d have to somehow put logic in there for the disable bit, right? Would you be doing that from scratch? It wouldn’t be hard to use that same logic to rebuild the object, dynamically and automated.

Scott