Vue-select: Support labels from nested objects

[drjonnicholson]

Hi,

We just had an issue where we had an object with different labels based on localisation, e.g. like this:

{ name: { en: 'test', ...} } 

The problem is that in this case we can't use a label value like name.en. Would it be possible to add support for nested object labels, e.g. using code like this: https://gist.github.com/jasonrhodes/2321581

I think the quick win is simple object nesting (dot notation), and not worrying about arrays (an extreme edge case I'd imagine)

Thoughts?

[drjonnicholson]

Or use LoDash... https://lodash.com/docs/4.17.5#at

[lucidsif]

We ran into this issue as well since our object was similarly nested like yours. I added lodash and opened a PR for this.

https://github.com/sagalbot/vue-select/pull/499

[drjonnicholson]

Awesome, well done @lucidsif. So how about it @sagalbot?

[tanmuhittin]

@lucidsif I just tested your pull request but there are some problems. I use multiple select but when I select one option, others are muted out.

Then I inspected Select.vue an recognized that there are other

something.[this.label]

parts in the code which creates problems since label is a deep label. These parts also should be updated

[sagalbot]

This is possible in v3:

<v-select :getOptionLabel="opt => opt.meta.label" />