Vue-select: Assign only value

[NightZpy]

Hi, i want assign only the value to a model:

options = [
{value: 'a', label: 'A'}
]

<v-select 
            :value.sync="selected" 
            :options="options">             
        </v-select>

When i select an option, selected is:

selected: {value: 'a', label: 'A'};

I want only this:

selected: 'a';

Whats the problem here or whats the solution?

Thanks!

[gallib]

Hi,

I had the same problem.

I used the on-change event to resolve it.

my function looks like:

onChange(obj) {
    this.selected = obj.value;
}

Hope that can help you.

[sagalbot]

@NightZpy, as you've seen vue-select returns the entire object by default, and @gallib solution will work, but you probably need to drop .sync as well:

<v-select :value="selected" :on-change="onChange" :options="options"></v-select>

//  in the VM
onChange(obj) {
   this.selected = obj.value;
}

Sorry for the slow reply, hope you got this sorted out.

[corkysru]

When I use this method it seems that it is triggering twice.
<div class="form-group"> <label class="control-label col-xs-3" for="status">status2</label> <div class="col-xs-6"> <v-select :value="patientdata.status" :on-change="onChange" value="label" :options="optionsdata.status"></v-select> </div> </div>

Method:
onChange(obj) { if(obj != null){ console.log(obj.value); this.patientdata.status = obj.value; } }

My optionsdata.status looks like:
['value' => 1, 'label' => 'Active'],
['value' => 2, 'label' => 'Monitoring'],
['value' => 3, 'label' => 'Completed'],
['value' => 4, 'label' => 'Deceased'],
['value' => 5, 'label' => 'Transferred'],
['value' => 6, 'label' => 'LTF'],
['value' => 7, 'label' => 'Inactive']

[corkysru]

So I removed the reliance on the on-change function and just made the submit form function return just the .value of status.
My problem now is that it is still not loading it correctly. It just shows the value in select not the corresponding label.

[jigneshparmar126]

Same problem i am having with v-select, it is not selecting label
<v-select v-model="po.status" :options="select.status"></v-select>

[knaos]

@sagalbot I think by default the users would expect when using v-model, only tha value in the 'value' property to be set. What do you think?

[Villarrealized]

Yes, I expected only the value to be set with v-model as a normal select element works. Having it return the whole object is quite cumbersome. I cannot use v-model with it set up this way, because my model is not structured in the same way as the options object which means that the value displayed is wrong.

I have to then use :value to give it an initial value based off my model and then listen using :on-change to update my model. Which as @corkysru pointed out, gets fired twice in a row.

[palanikumar32]

This one works,

<v-select v-bind:options="options" 
          v-bind:value="$.grep(options, function (x) { return x.value == selected })[0]"
          @input="selected=$event.value">
</v-select>