vue-select
vue-select copied to clipboard
sagalbot
Selected option setting id value
If there is a default value for vue-select it sets id value. it doesnt set label.
<v-select
:options="agentList"
label="full_name"
v-model="$v.agent_id.$model">
>
</v-select>
When I inspect from vue dev tools selectedValue appears as 1.
I expect to see full_name at first but it shows id value.
I was surprised by this as well.
You can do a simple workaround by wrapping it in your own componenthave a computed property like this to trick the component to believe the label is the value
<!-- in wrapper-vue-select -->
computed: {
model: {
get() {
return this.options.find(x => x.id === this.value).label;
},
set(option) {
this.$emit('input', option.id);
}
}
}
Don't understand how to implement the previous method. Why isn't there an update on this? This completely breaks the initial loading view of the component.
Same here setting default value programmatically displays the code instead of the label.
Same issue If I have 2 selectboxes with one source for options, and I update on the fly this source after first selectbox was selected label is changed by id...This is weird!
Same issue, any solution???
Yes. Vue Multiselect - https://vue-multiselect.js.org/
Works better and has more features.
Just use the get-option-label prop: https://vue-select.org/api/props.html#getoptionlabel
<template>
<vue-select
:options="options"
:reduce="item => item.id"
:get-option-label="getLabel"
/>
</template>
<script>
export default {
data: () => ({
options: [
{ id: 1, label: 'Option 1' },
{ id: 2, label: 'Option 2' }
]
}),
methods: {
getLabel (option) {
if (typeof option === 'object') {
return option.label
}
const optionObject = this.options.find(item => item.id.toString() === option.toString())
if (optionObject) {
return optionObject.label
}
return option
}
}
}
</script>
Adding if ((option && this.label && this.index) || !option || !option.length) return ""; above return option; here seems to resolve the problem.
Same here. Tried to solve it with reduce, spent hours to debug this. Well, ended up creating a method like above, but that just unnecessary code for such a basic thing. I liked the simplicity of vue-select, so i really wanted to solve it, but ended switching to vue-multiselect - just works there.
