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.

[esl51]

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>

[HenrijsS]

Same issue, any solution???

Yes. Vue Multiselect - https://vue-multiselect.js.org/

Works better and has more features.