<VsSelect> - valueLabel shows Array[0] but it has a selected value.

[dcmonten]

At first I noticed that my value label was not showing at the select component: But it has a selected value inside I checked the component and found out that valueLabel is used to show the value label, and it's filled with Array[0] while it should have Array[1].

[xithalius]

@dcmonten Can you share some code / a codepen? I can't reproduce this problem.

[8BitJonny]

I know I'm a bit late to the party but I think I found a way to reproduce the issue. I just had the same issue locally and I think I figured out why it could have been caused.

The screenshots already highlight perfectly that all id's from all vs-option elements have been added to the uids array of the vs-select Vue component but only two vs-option elements have been added to the childOptions array.

According to https://github.com/lusaxweb/vuesax-next/blob/0976043042498b9337bd3fd611f777e1788f3ba7/packages/vuesax/src/components/vsSelect/Option/vsSelectOption.ts#L58-L61 this can only happen when the vs-select vue component has set renderSelect to true. renderSelect is in my understanding just saying if vs-select has been mounted: https://github.com/lusaxweb/vuesax-next/blob/0976043042498b9337bd3fd611f777e1788f3ba7/packages/vuesax/src/components/vsSelect/Base/vsSelect.ts#L418

So basically what happened to me locally (and what I think happened here) is that the initial array, that provides the data for vs-options was empty on initial rendering and then probably filled during Vue's mounted hook. A few items of the late initialised array are then rendered before the renderSelect is set to true and a few are too late and not put into childOptions which is the root cause for the label not showing inside the select.

I solved it locally by initialising the array inside the created hook and not the mounted hook.

Let me know what you think