How do I use optgroup?

[imrannazirbhat]

Hello,

I need to have grouping for option by using optgroup, please let me know if there is any option for the same!

Regards,
ImraN

[mix3d]

Unfortunately, no, there's a handful of requests (#131, #184, #342, #355), all linked to the trello backlog item created 3 years ago. Feel free to implement and propose a solution!

[sagalbot]

Thanks for compiling that list @mix3d, actually quite helpful. I’ve been very slow to move on this one because I’m not crazy about any solution that involves data requiring a specific structure. So far all the PRs that have come in for it all have require the data to shaped in a specific way. Scoped slots is a much more elegant solution to the problem, solves for optgroups, but also opens itself up for a whole host of other implementations.

To get it right, I think it requires a big refactor to the way options are stored. The scope of the public api also needs to increase so that things like select and deselect can happen reliably in people’s templates. That requires a lot of time on documentation as well. These are things I really want, but my time is limited, so I’ve focused more on small features to keep things improving continually and hope that I’ll have space to do a v4 rewrite that will solve a lot of these problems in the future.

[mix3d]

And something as simple as an optgroup key on the options objects, (or require a prop specifying which key name, ignoring optgroups if not set), is not robust enough? Removes the need for hierarchical data organization, even if it's a bit redundant, and is still backwards compatible. Downside is course is then how do you sort which group is displayed first. Could provide an array of keys in the order you want? (Hacky)

But if your ideal also includes things like selecting a whole group at a time, for example, then I can see the need for better slot based approaches.

I'm assuming you also don't want to include something "for now" that gets replaced in v4?

[sagalbot]

Things are not actually that far off as it stands: https://codepen.io/sagalbot/pen/JjYraqX

I think an API based on functions vs strings is likely going to work a little better. There might actually be a fairly simple way to achieve it. Something like a getOptionGroup function. That function would be responsible for returning a string (or an object) that defines the group of a given object. If that prop is defined, the component then knows we're working with groups, and could adjust to handle it.

[DavidVaness]

Any news? Can I help implement this?

[CeloHill]

please

[gavmck]

I'm having to abort on vue-select due to lack of optgroup support as well. Nice component otherwise!

[adamdyderski]

Ping

[kovalevadim]

+1 optgroup

[aniket-kale]

Any updates on this? Thanks.

[krusche-sensetence]

+1 for optgroup

[l-bowman]

+1 for optgroup

[mix3d]

Could always fork and try implementing this approach? More than three years later we still don't have an official solution :/

[howard-tzw]

Hi all, currently, you can make use of optgroups in vue3-select@0.1.0, which is a forked repository exclusively maintained for Vue 3

• repo: https://github.com/howard-tzw/vue3-select
• demo: https://vue3-select.vercel.app/optgroups