在 v-select 中更改芯片的样式和颜色

Question

如何更改芯片的颜色和样式v-select？

我有这样的代码：

<v-select
  v-model="value"
  :items="roles"
  :menu-props="{ top: true, offsetY: true }"
  small-chips
  label="Roles"
  multiple
  hint="Select the role"
  persistent-hint
>
</v-select>

如何将筹码更改为样式标签和蓝色？

Answer 1

你可能想要selection插槽。

<v-select
  v-model="value"
  :items="roles"
  :menu-props="{ top: true, offsetY: true }"
  small-chips
  label="Roles"
  multiple
  hint="Select the role"
  persistent-hint>
  <template #selection="{ item }">
    <v-chip color="blue">{{item.name}}</v-chip>
  </template>
</v-select>

在哪里item.name将取决于roles.