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

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 and slot-scope 从 Vue 2.6.0 开始被弃用。

新的插槽语法将这两个属性组合成 v-slot, so the equivalent 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 slot 来呈现所选项目的外观：

<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>

demo

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

Vue v-select problem with v-slot not showing text

javascript

vue.js

vuetify.js

v-select