Vue-select: Option to specify `id` property / selected key

[sellvana]

Hello,

There's :label prop to specify which option object property should be used as a label, but I can't find how to specify the actual value property. Right now the v-model is set to the whole object.

Is there a way to specify to set the result value of object property?

Thanks

[sagalbot]

Hi @sellvana,

I played around with creating a model-key property this morning that would allow you to specify a key to use as a value. It's unfortunately not as simple to implement as I'd have hoped, as there's a lot of touch points throughout the component that I'll need to update. I'll add it to the backlog.

[sellvana]

Thank you, I guess a wrapper component could be a temporary solution for now

[sagalbot]

Using a computed property in the parent can be useful.

http://jsbin.com/wedalog/8/edit?html,js,output

[sellvana]

Unfortunately that won't work for me because I'm binding it directly to field value in dynamically generated forms

[murilolivorato]

I had this problem as well

[simplethemes]

I also ran into this issue.

If you find time to looking into a solution, you may want to check out how the developer got around this using optionsValue in vue-strap/Select. I'm not sure if it helps but thought I'd share.

[sagalbot]

Optionally return a specific key from selected objects

[bformet]

This is actually the default behavior I was kind of expecting,
sounds reasonable to have it as an option

[gthuo]

Any built in solution to this issue yet? Why then do we need to specify a property called value (as the Docs advice) [or the Docs only mention the label property?] if this property will never be internally used by the component?

[aeksco]

:+1: Glad this issue is open.

This missing feature is a bit of a show-stopper in my project right now - I'll likely resolve it by building a wrapper component around v-select to select the value attribute, instead of returning the selected { value, label } object

[SimoTod]

Hi @sagalbot, I've been working on this feature (I need it for one of my projects) and I came up with a solution yesterday. Are you okay with me sending a PR tonight or are you already working on it?

[sagalbot]

@gthuo maybe I should take value out of the docs examples to avoid confusion - there's no need to specify that key, only a label and it can be set dynamically.

@SimoTod absolutely, feel free to PR, this one is a high priority.

[moyvera]

@SimoTod send that PR please 🤙

[sagalbot]

@moyvera it's in progress #423. Just doing a bit of testing to make sure the API is good to go.

[moyvera]

oh! I saw it, nice, it's almost there ! thanks guys !!!

[NanoDev777]

@sagalbot Hello, is the update to this problem already available?

[purvishah165]

Do we have a solution for this available?

[varadekd]

Having the same problem, For the time fixed by converting the object to an array, but initially this not a good solution. Can you please tell me how can I use vue-select for objects. Each time I try to follow the example http://jsbin.com/wedalog/8/edit?html,js,output
I get an error message: this.options.slice is not a function

@sagalbot

[oscarjlep]

I know that this isn't an answer to the need, but here is a snippet from my project where I'm using V-select for looped (order)rows with selectable vat-codes. vatCode-object has bunch of properties such as id, percentage, description, etc, and some of those props are needed for callback. This was my approach for keeping both sync and handling selection... hope it helps someone pondering with the same problem:

<template>
    <div>
        <v-select v-model="selected" :filterable="true" :options="vatCodes">
            <template slot="option" slot-scope="option">
                <span>{{ option.vatCode }} {{ option.description }}</span>
            </template>
        </v-select>
    </div>
</template>

<script>
module.exports = {
    props: ["row", "vatCodes"],
    components: { 'v-select': VueSelect.VueSelect },
    data: function() {
        return {
            selected: false
        }
    },
    watch: {
        selected: function(vat) {
            this.row.vatCode = vat.vatCode;
        }
    },
    methods: {},
    created: function() {
        var me = this;
        me.vatCodes.forEach(function(vc) {
            if(vc.vatCode == me.row.vatCode) me.selected = vc;
        });
    }
}
</script>

This template is basically an sub-component, which is called in following fashion:

<div v-for="row in rows">
  <item-name :row="row"></item-name>
  <vat-code :row="row" :vat-codes="vatCodes"></vat-code>
 .... etc ....
</div>

This approach has the limitation of parent-component not updating selection automatically, but this could be easily resolved by using watcher against row.vatCode and moving selection-loop to it's own method, which would be called either by watcher or created-function.

[pr4xx]

This is a very important feature I think. Right now I have to convert the values back and forth for my backend since my model only contains the id (value) of the selected option.

It would be very nice if we can resolve this issue.

[zealotrahl]

So, still no sollution to this?

[MaGaKZ]

@sagalbot Can you include example to the docs ?

[RogerMito]

Nothing yet? That's a big flaw in the project. :(

[mariobalca]

I'm also really interested in this feature
How could I help get this shipped?

[Tofandel]

To everyone still asking, this has been implemented here is how to use it:

new Vue({
  el: '#app',
  data: {
    value: ['bar'],
    options: [{value: 'foo', label: 'Foo'}, 
              {value: 'bar', label: 'Bar'}, 
              {value: 'baz', label: 'Baz' }]
  }
});
<v-select :options="options" index="value" :multiple="true" v-model="value"></v-select>

[sagalbot]

This feature has been around since 2.5. In 3.0, this API has been replaced with a reduce function prop #800 #780.

This feature is up in the new docs @ https://vue-select.org/guide/values.html#transforming-selections.

[dark0fire]

To be fair I find the reduce method a very confusing name for defining an index...