mirror of
https://github.com/tenrok/vue-select.git
synced 2026-06-10 07:52:23 +03:00
Jeff Sagal
223f3a6d85
commit8c3a1b107bAuthor: Jeff Sagal <sagalbot@gmail.com> Date: Fri Jul 15 09:57:37 2022 -0700 bump to vitepress 1.0.0-alpha.4 commit96ff08406cAuthor: 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 commitf3e22e0439Author: Jeff Sagal <sagalbot@gmail.com> Date: Sat Feb 19 17:18:30 2022 -0800 remove yarn, rename readme commit8cd3bbeb51Author: Jeff Sagal <sagalbot@gmail.com> Date: Sat Feb 19 17:17:22 2022 -0800 install vitepress
33 lines
1.0 KiB
Markdown
33 lines
1.0 KiB
Markdown
::: 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](../api/slots.md) 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.
|
|
|
|
```html
|
|
<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.
|
|
|
|
<CodePen url="NXBwYG" height="500"/>
|
|
|
|
### 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.
|
|
|
|
<BetterNoOptions />
|
|
|
|
<<< @/.vitepress/components/BetterNoOptions.vue
|