v-slot不显示文本的Vue v-select问题

Question

我正在尝试按插槽在 v-select 选项中显示自定义文本。

模板：

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

脚本：

data () {
  return {
    dLevelSelected: null,
    dLevels: [{id:1, value: 1, description: 'Level1'}, {id:2, value: 2, description: 'Level2'}]
  }
}

这样，当您打开 v-select 时，dLevels 的两个寄存器显示为框，但带有任何文本。 似乎 data.description 正在像 data.undefined 一样被评估

谢谢！

Answer 1

slot和slot-scope从 Vue 2.6.0 开始被弃用。

新的 slot 语法将这两个 props 组合到v-slot中，因此等效的item slot是：

<template v-slot:item="scope">
  <span>{{ scope.item.description }}</span>
</template>

请注意， scope包含可用于访问description的item属性。 您可以使用对象解构将其简化为：

<template v-slot:item="{ item }">
  <span>{{ item.description }}</span>
</template>

同样，您可能需要一个自定义selection槽来呈现所选项目的外观：

<template v-slot:selection="{ item }">
  <span>{{ item.description }} ({{ item.value }})</span>
</template>

最终模板应类似于以下内容：

<v-select v-model="dLevelSelected" :items="dLevels" solo>
  <template v-slot:item="{ item }">
    <span>{{ item.description }}</span>
  </template>
  <template v-slot:selection="{ item }">
    <span>{{ item.description }} ({{ item.value }})</span>
  </template>
</v-select>

演示