vue-select设置默认值不生效，显示value而非对应label如何解决？

问题原因 #

你混淆了不同UI库的组件属性，item-value 是 Vuetify 框架中 v-select 组件的属性，你现在用的 vue-select 库没有这个属性，所以配置没有生效。
vue-select 没有内置单独指定 value 字段的字符串属性，如果你需要传入基础类型值（比如数字1）进行匹配，需要通过 reduce 属性定义选项到值的映射规则，没有配置该规则时，组件无法把你传入的数字1匹配到对应的选项对象，就会直接把原始值1作为显示文本渲染。

解决方法 #

两种方案选其一即可：

方案1：直接绑定选项对象 #

直接将选中值绑定为对应的完整选项对象，组件会自动读取你配置的 label="text" 展示对应文本：

<v-select
    id="modal-job_type"
    :value="jobTypeOptions[0]"
    name="job_type"
    :options="jobTypeOptions"
    label="text"
/>

方案2：配置reduce映射规则 #

如果你需要用基础类型值（比如数字、字符串）作为绑定值，增加reduce属性定义值的提取规则即可：

<v-select
    id="modal-job_type"
    v-model="selectedValue" // 这里默认赋值1就可以正常匹配
    name="job_type"
    :options="jobTypeOptions"
    label="text"
    :reduce="option => option.value"
/>

内容的提问来源于stack exchange，提问作者hanachan1026