Zenn
🐿️

【Vuetify】v-slotを使ってv-selectのchipsをカスタマイズする

2023/06/23に公開
Vue.js
Vuetify
Vue 3
Vuetify 3
tech

はじめに

Vuetify 3でv-selectとchipsを使用した場合にchipsのAPIをカスタマイズする必要があったため、名前付きSlotを使って解決した備忘録です。

サンプルコード

<v-select
  chips
  closable-chips
  label="選択する"
  :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
>
  <template #chip>
    <v-chip close-icon="mdi-close-box" variant="text" size="default" />
  </template>
</v-select>

参考

v-selectで使用できる名前付きSlot
https://vuetifyjs.com/en/api/v-select/#slots-chip

v-chipで使用したProps
https://vuetifyjs.com/en/api/v-chip/

Discussion