I've put v-model in v-select but it returns the whole object
<div id="app">
<h1>Vue Select - Using v-model</h1>
<v-select v-model="selected" :options="options" value="id" label="labels">
</v-select>
{{selected}}
</div>
Vueponent('v-select', VueSelect.VueSelect)
new Vue({
el: '#app',
data: {
options: [
{id: 1, labels: 'foo'},
{id: 3, labels: 'bar'},
{id: 2, labels: 'baz'},
],
selected: '',
}
})
this will result to this
is there a way to get the selected objects id only instead of the whole object? I've tried putting value="id" but still doesn't work.
I've put v-model in v-select but it returns the whole object
<div id="app">
<h1>Vue Select - Using v-model</h1>
<v-select v-model="selected" :options="options" value="id" label="labels">
</v-select>
{{selected}}
</div>
Vue.ponent('v-select', VueSelect.VueSelect)
new Vue({
el: '#app',
data: {
options: [
{id: 1, labels: 'foo'},
{id: 3, labels: 'bar'},
{id: 2, labels: 'baz'},
],
selected: '',
}
})
this will result to this
is there a way to get the selected objects id only instead of the whole object? I've tried putting value="id" but still doesn't work.
Share Improve this question edited Mar 7, 2019 at 3:48 Jiel asked Mar 7, 2019 at 3:20 JielJiel 1231 gold badge4 silver badges13 bronze badges 4- which library are you using for v-select? – Duong Dang Commented Mar 7, 2019 at 3:28
- @DuongDang sagalbot.github.io/vue-select – Jiel Commented Mar 7, 2019 at 3:30
-
what are you exactly trying to return? Also, can you show us your dataobject so we can see how you have your
options
marked up? - Sinceselected
is an object, you should be able to return the value you want by doing{{ selected.id }}
(or whatever value you are returning – Mike Diglio Commented Mar 7, 2019 at 3:31 - @MikeDiglio i want to put the selected objects id only in v-model, in this case it puts the whole object.. so in selected, it must have the value "1". instead of {id: 1, labels: foo} – Jiel Commented Mar 7, 2019 at 3:35
3 Answers
Reset to default 2Your best option would be to use a puted
property so you can manipulate selected
to return your requested value:
puted: {
selectedID: function () {
return this.selected.id;
}
}
Working Codepen with your example
Do you mean
<v-select v-model="selected" :options="options" id=" {{selected.id}} " label="labels">
?
This will bind the selected ID into your V-select.
@Jiel , here is the working demo
Vue.ponent('v-select', VueSelect.VueSelect);
var app = new Vue({
el: '#app',
data: {
selected:'',
options: [
{ id: 0, labels: 'Vegetables' },
{ id: 1, labels: 'Cheese' },
{ id: 2, labels: 'Fruits' }
]
},
puted: {
selectedID: function () {
return this.selected.id
}
}
})
<script src="https://cdn.jsdelivr/npm/vue"></script>
<script src="https://unpkg./vue-select@latest"></script>
<link href="https://maxcdn.bootstrapcdn./bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<div id="app">
<h1>Vue Select - Using v-model</h1>
<v-select v-model="selected" :options="options" label="labels">
</v-select>
selectedID : {{selectedID}}
</div>