Vuetify: [Feature Request] Ability to pre-fill a Select component

Created on 18 Jan 2018  路  4Comments  路  Source: vuetifyjs/vuetify

New Functionality

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:

  • "bonjour" in the search field
  • {type: "word",language: "french"} in v-model

Improvements

There are, as far as I know, no workarounds

Bugs or Edge Cases it Helps Avoid

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)

enhancement question

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-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.

All 4 comments

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.

https://codepen.io/anon/pen/EQPwdb?editors=1010

The above comment represents how to apply this in user land.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Webifi picture Webifi  路  3Comments

sebastianmacias picture sebastianmacias  路  3Comments

ricardovanlaarhoven picture ricardovanlaarhoven  路  3Comments

dohomi picture dohomi  路  3Comments

paladin2005 picture paladin2005  路  3Comments