mirrors/vue-select
2
0
Fork 0
mirror of https://github.com/tenrok/vue-select.git synced 2026-06-04 06:32:23 +03:00
Code Activity
Files
beta--vitepress
vue-select/docs/guide/slots.md
T
Jeff Sagal 223f3a6d85 Squashed commit of the following: 
commit 8c3a1b107b
Author: Jeff Sagal <sagalbot@gmail.com>
Date:   Fri Jul 15 09:57:37 2022 -0700

    bump to vitepress 1.0.0-alpha.4

commit 96ff08406c
Author: Jeff Sagal <sagalbot@gmail.com>
Date:   Wed Feb 23 10:25:36 2022 -0800

    vitepress wip

    mostly working, feeling like vuepress should still be considered

commit f3e22e0439
Author: Jeff Sagal <sagalbot@gmail.com>
Date:   Sat Feb 19 17:18:30 2022 -0800

    remove yarn, rename readme

commit 8cd3bbeb51
Author: Jeff Sagal <sagalbot@gmail.com>
Date:   Sat Feb 19 17:17:22 2022 -0800

    install vitepress
2022-07-18 09:40:42 -07:00

1.0 KiB
Raw Permalink Blame History

::: tip 🚧 This section of the guide is a work in progress! Check back soon for an update. Vue Select currently offers quite a few scoped slots, and you can check out the API Docs for Slots in the meantime while a good guide is put together. :::

Scoped Slot option

vue-select provides the scoped option slot in order to create custom dropdown templates.

<v-select :options="options" label="title">
  <template v-slot:option="option">
    <span :class="option.icon"></span>
    {{ option.title }}
  </template>
</v-select>

Using the option slot with props "option" provides the current option variable to the template.

Improving the default no-options text

The no-options slot is displayed in the dropdown when filteredOptions === 0. By default, it displays Sorry, no matching options. You can add more contextual information by using the slot in your own apps.

<<< @/.vitepress/components/BetterNoOptions.vue

View Git Blame Copy Permalink