Vue-multiselect: Different value and lable

[12three]

Hello! I need your help, my source data option look like
{name: 'someName', id: 13}.
How I can use property name like a label and id like a value?

[shentao]

Hey!

See example:
https://monterail.github.io/vue-multiselect/#sub-single-select-object

In your case props would be:
track-by="id", label="name".

[nikitakuhta]

@shentao, But why the value is {"name": "Phoenix", "language": "Elixir"}, not Phoenixin your example? I thought, the value of select must be id, not entire record.

[ajthenewguy]

This doesn't work for me either; I have an array of objects set as :options (each object has two keys, "id" and "name"), and set track-by="id" and label="name". The options render in the dropdown, but when I select one, it gets added without a label (just an empty green box), plus I get this error:

vue.common.js:565 TypeError: Cannot read property 'id' of undefined
    at vue-multiselect.min.js:1
    at Array.map (<anonymous>)
    at VueComponent.valueKeys (vue-multiselect.min.js:1)
    at Watcher.get (vue.common.js:2919)
    at Watcher.evaluate (vue.common.js:3026)
    at VueComponent.computedGetter [as valueKeys] (vue.common.js:3320)
    at VueComponent.isSelected (vue-multiselect.min.js:1)
    at VueComponent.boundFn [as isSelected] (vue.common.js:181)
    at VueComponent.optionHighlight (vue-multiselect.min.js:1)
    at Proxy.boundFn (vue.common.js:180)
    at vue-multiselect.min.js:1
    at Proxy.renderList (vue.common.js:3912)
    at Proxy.render (vue-multiselect.min.js:1)
    at VueComponent.Vue._render (vue.common.js:4197)
    at VueComponent.updateComponent (vue.common.js:2576)
    at Watcher.get (vue.common.js:2919)

[shentao]

The value is always the whole object/array of objects/primitive/array of primitves. This is required for several reasons:
1) The whole object is used to build the label/custom label
2) The track-by key is only used to compare the objects. It’s not a standalone value.
3) Those are especially important when you use asynchronous options, where the options elements are dynamic. If the value only stored the ID it would be really hard to display a label. Not to mention custom option templates.

[derekphilipau]

This is my only issue with an otherwise excellent component. I understand the need to use objects, however I am forced to create the selected value like this:
multiselectVmodelProp: { value: myExistingValue, label: 'lookupString' }

It would save a lot of time and extra code to just simply specify the value and let multiselect handle displaying the proper label by looking it up in the options array:
multiselectVmodelProp: { value: myExistingValue }

As it stands, I have to do the lookup for the value's label myself.

[spaceemotion]

Voting this up as our team had the same problem today. We ended up with a solution similar to this:

<multiselect
  ...
  :value="{
    id: file.id,
    label: filesById[id].name,
  }"
/>

Would be great if there'd be an option for something like a label lookup:

<multiselect
  v-model="fileId"
  :options="files"
  :option-labels="filesById"    <-- new
  :label="name"
  :track-by="id"
/>

Alternatively, the solution proposed by @derekphilipau would be even easier :)

[poncianodiego]

+1 for @derekphilipau suggestion

[kovsky0]

My solution was to extend the component and add:

props: {
        /**
         * Property of the option object to be returned instead of full object
         * @type {String}
         */
        valueInObject: {
            type: String
        }
    },
    computed: {
        internalValue () {
            if (this.valueInObject && this.value) {
                return this.options.filter(option => option[this.valueInObject] === this.value)
            }
            return this.value || this.value === 0
                ? Array.isArray(this.value) ? this.value : [this.value]
                : []
        }
    },

We define the property of the object that we want to search by and then overshadow the internalValue computed property to look for an option object with that property that is matching our value.

The template:

<multiselect 
    @input="option => data = option.v" 
    :value="data"
    valueInObject="v"
    :options="[
         { label: 'option1', v: 'value1' }
         { label: 'option2', v: 'value2' }
    ]"

></multiselect>

[shentao]

@kovsky0 a fine solution, though it won’t work for async data since you won’t be able to display labels without any label information in the selected object.