This was initially posted as an SO question but after numerous rounds I believe the ability is just not there
With the asynchronous version, where I get selectable data as
[
{
text: "hello",
value: {
type: "word",
language: "english"
}
},
{
text: "bonjour",
value: {
type: "word",
language: "french"
}
}
]
they are, upon selection, stored in v-model as an array of objects (the value of the proposed selection above).
It would be great to be able to to pre-populate the search field with some default entries (say, the French one above), to have:
{type: "word",language: "french"} in v-model There are, as far as I know, no workarounds
Cases where the Select component is used not only to select new data, but also to reuse some which were selected earlier (and retrieved for, for instance, a database)
It is possible if you add the value to the items array: https://codepen.io/anon/pen/XVozQm?editors=1010
Note that objects in JS are references, so it must be the exact same object, not just one that looks the same.
There is also a value-comparator prop added in #2712, but I'm not really sure what it's for. Doesn't look like it's hooked up to much internally.
@KaelWD Thank you very, very much. _Note that objects in JS are references_ was really helpful.
I expanded on your example, taking a more real-life case (where the pre-filled data are loaded from a database (simulated in my code)) and all choices are loaded from another one (also simulated). It is at https://codepen.io/WoJWoJ/pen/GyzNqb?editors=1010 should someone have the same problem.
Note that there is a special case where the pre-populated data and the "all choices" one share some elements (which is likely in my case, as the pre-populated ones were, in the past, chosen from these "all choices"). A possible remediation is suggested in the code.
@KaelWD : I do not know if you are active on SO, but if so please juste bootstrap an answer so that I can add code etc. to it) and that you get the recognition. Otherwise I would post one in a few days to close my question.
@wsw70 @KaelWD Great work, I needed this!
I thought I would try to help a little too, so I've made a simple pen elaborating on the "special case" mentioned by @wsw70, where elements are shared. I think this is actually the more likely scenario when doing this, so hopefully it helps someone.
The above comment represents how to apply this in user land.
Most helpful comment
It is possible if you add the value to the items array: https://codepen.io/anon/pen/XVozQm?editors=1010
Note that objects in JS are references, so it must be the exact same object, not just one that looks the same.
There is also a
value-comparatorprop added in #2712, but I'm not really sure what it's for. Doesn't look like it's hooked up to much internally.