Vue-multiselect: How do you select which property in an object to pass back to as the value?

[rcheung9]

https://vue-multiselect.js.org/#sub-single-select-object

I'm new to Vue and I'm trying to replace my Select2 with vue-multiselect. I've followed the examples and have the select box set up but when I select an item from my list, it returns the whole object.

In the example, I don't want the object, just Sinatra or just Ruby (depending on which prop I want).

{
  "name": "Sinatra",
  "language": "Ruby"
}

I want to specify which property to return as value. So if I set name as the property I want as value then it should only return Sinatra.

[shentao]

This is not possible on the Multiselect side. You have to extract the value from the object yourself. There are reasons for that (ajax options, preselecting).

[davestewart]

We have the same issue, and find the object-centric way of doing things to be quite clunky and generates a lot of extra code.

Ideally we would be able to pass an object in, but the track-by prop (which is the unique value, of course) would also define the payload of emits and so for @input passed to the v-model:

https://github.com/shentao/vue-multiselect/blob/master/src/multiselectMixin.js#L495

It seems that a backward compatible way to solve this might be to add an additional prop, for example: value-from?

[shentao]

The @input event emits the same structure you put into value. If you pass objects, you will receive objects. track-by is used to compare objects.

This is a recurring issue: See #385

[davestewart]

OK, thanks. I'll continue any discussion there.

[nrgx]

Is there any advancement? Because I really need to get object's id property not whole object. My Django back-end makes this object as an array with one string and argues that this is invalid id. I tried @select which works well if I remove v-model but the option is not displayable in select.