Vue-multiselect: Set initial value for single select object

[cyberfly]

Hi how can set initial value for Single Select Object? For example, I want the categories with id 1 to selected on load. This is my current code

data () {
      return {
            category_id: null,
            default_category_id: 1,
            categories = [
            {
                  id: 1,
                  title: 'test1',
            },
            {
                  id: 2,
                  title: 'test2',
            },
            ]
      }
},

<multiselect
      v-model="category_id"
      :value="'default_category_id'"
      :options="categories"
      track-by="id"
      label="title"
></multiselect>

Thanks

[shentao]

You have to preselect using the complete object, not just the ID.

v-model="category" where category equals { id: 1, title: 'test1' }. The object has to include at least the property that is used by track-by as well as the one used by label.

[cyberfly]

Thanks it works. I think you should update the documentation, or I did missed it.

Final code

data () {
      return {
            category: { 
                  id: 1, 
                  title: 'test1' 
            },
            categories = [
            {
                  id: 1,
                  title: 'test1',
            },
            {
                  id: 2,
                  title: 'test2',
            },
            ]
      }
},

<multiselect
      v-model="category"
      :options="categories"
      track-by="id"
      label="title"

></multiselect>

[phlegx]

I don't understand why I need to pass the complete object in value property? If I set track-by with e.g. id then it should be enough to pass an Integer or Array of Integers to the value property. Vue-multiselect can set selected object(s) searching with track-by value (e.g. id) as key in the options Array of Objects.

Same problem with v-model! If track-by is set to id then v-model should only return the selected id(s) as Integer or Array of Integers.

These two things make everything easier. Like now, I need additional data processing that makes all unnecessarily complicated.

[shentao]

@phlegx sure, and please explain to me now, how it can do that if the options are asynchronous and not present in the options list when you preselect or search for something to select.
Keep in mind you still want to display more than just the id, for example, a label or a custom label constructed from several other fields from that object.

[phlegx]

@shentao that's true but this is only one special case (if the options are asynchronous and not present in the options list). But not beneficial for all other cases. It can be solved adding a property if value and v-model should be only the track-by value or the complete object.

[shentao]

As already stated in _yet another issue on the topic_ this is somewhat considered in the v3 version of the library. No plans on introducing it in 2.x though. Simply because the library is already hard to reason about and the problem you’re describing is also something that can be solved with one computed property with a get and set. https://vuejs.org/v2/guide/computed.html#Computed-Setter

[phlegx]

@shentao nice to hear that it is planned in v3!
I don't know what I make wrong, but I'm not able to pre-select an option with: { value: 1, label: 'Test' } with label="label" and track-by="value" and :value="{ value: 1, label: 'Test' }". Any idea?

[shentao]

Not sure. Please provide a JSFiddle.

[phlegx]

Found the problem. I cannot use property value in combination with v-model at the same time.

[shentao]

Same with @input.