Vue v-select组件使用item插槽自定义选项时文本不显示问题

v-select的item插槽向外传递的作用域对象不是你传入items数组的原始元素，而是组件内部包装后的上下文对象，你直接访问data.description相当于在这个包装对象上找属性，自然拿到undefined，导致文本无法渲染。

修改插槽内的取值路径，原始选项数据存放在上下文对象的item字段下，调整模板代码如下：

<v-select v-model="dLevelSelected" :items="dLevels" solo>
  <template slot="item" slot-scope="data">
    <span>{{ data.item.description }}</span>
  </template>
</v-select>

补充配置 #

如果需要选中后输入框内也正常显示description文本，不需要额外自定义选中态插槽，只要给组件加上item-text属性指定显示字段即可，同时可以通过item-value指定选中后绑定的value字段：

<v-select 
  v-model="dLevelSelected" 
  :items="dLevels" 
  solo
  item-text="description"
  item-value="id"
>
  <template slot="item" slot-scope="data">
    <span>{{ data.item.description }}</span>
  </template>
</v-select>

item插槽暴露的上下文对象常用属性如下，按需取用即可：

• item：传入items数组的原始数据项
• index：当前选项在下拉列表中的索引
• selected：布尔值，标识当前选项是否处于选中状态
• disabled：布尔值，标识当前选项是否禁用

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