mirror of
https://github.com/tenrok/vue-select.git
synced 2026-05-17 02:29:37 +03:00
Jeff
120 lines
3.9 KiB
Markdown
120 lines
3.9 KiB
Markdown
## `index` prop replaced with `reduce`
|
|
|
|
- v2.x provided the `index` `{String}` prop to return a single key from a selected object
|
|
- v3.x removes the `index` prop, replacing it with the `reduce` `{Function}` prop.
|
|
|
|
Using a function instead of a string provides a whole lot more flexibility, allowing for things like
|
|
deeply nested values, and really cleaned up the code internally.
|
|
|
|
```js
|
|
const options = [{country: 'Canada', code: 'CA'},];
|
|
```
|
|
|
|
```html
|
|
<!-- v2: using index --->
|
|
<v-select :options="options" label="country" index="code" />
|
|
|
|
<!-- v3: using reduce --->
|
|
<v-select :options="options" label="country" :reduce="country => country.code" />
|
|
```
|
|
|
|
View the full [documentation for `reduce`](values.md#returning-a-single-key-with-reduce).
|
|
|
|
## Events instead of Callbacks
|
|
|
|
Three function callbacks have been removed in favor of using events.
|
|
|
|
- `onChange`
|
|
- `onInput`
|
|
- `onSearch`
|
|
|
|
While this is a breaking change, the change in your application should be as simple as swapping the
|
|
prop you were using for an event.
|
|
|
|
### `onChange` & `onInput`
|
|
|
|
In v2.x, Overwriting `onChange` in an application was more likely to break vue-select's internals
|
|
and cause issues. The `input` event provides identical functionality and can be swapped out in your
|
|
application.
|
|
|
|
```html
|
|
<!-- version 2: -->
|
|
<v-select :on-change="doSomething" />
|
|
|
|
<!-- version 3: -->
|
|
<v-select @input="doSomething" />
|
|
```
|
|
|
|
Additionally, the `change` event has been removed. This event was redundant, `input` should be used
|
|
instead.
|
|
|
|
```html
|
|
<!-- version 2: -->
|
|
<v-select @change="doSomething" />
|
|
|
|
<!-- version 3: -->
|
|
<v-select @input="doSomething" />
|
|
```
|
|
|
|
### `onSearch`
|
|
|
|
The `onSearch` prop was removed for the same reason as `onChange` and `onInput`. The `search` event
|
|
has always provided the same parameters and can be used in it's place.
|
|
|
|
```html
|
|
<!-- version 2: -->
|
|
<v-select :on-search="doSomeAjax" />
|
|
|
|
<!-- version 3: -->
|
|
<v-select @search="doSomeAjax" />
|
|
```
|
|
|
|
### `@search` with null search string
|
|
|
|
The `@search` event is now fired anytime the search string changes. In v2.x, the component
|
|
would first check if the search string was empty, and only emit the event if it had at least one
|
|
character. This was a design mistake, as it should be the consumers decision if a search should be
|
|
run on an empty string.
|
|
|
|
## Separated CSS
|
|
|
|
CSS was removed from the JS bundle in favor of a separate CSS file to support SSR and easier
|
|
customization.
|
|
|
|
```js
|
|
@import vSelect from 'vue-select`;
|
|
@import 'vue-select/dist/vue-select.css';
|
|
```
|
|
|
|
## New Class Selector Prefix
|
|
|
|
In order to avoid CSS collisions and allow for low specificity overrides of CSS, all classes have
|
|
been renamed to include the `vs__` prefix. The full list of renamed classes are listed below:
|
|
|
|
| original | renamed |
|
|
| ------- | --------- |
|
|
| `.open-indicator` | `.vs__open-indicator` |
|
|
| `.dropdown-toggle` | `.vs__dropdown-toggle` |
|
|
| `.dropdown-menu` | `.vs__dropdown-menu` |
|
|
| `.clear` | `.vs__clear` |
|
|
| `.selected-tag` | `.vs__selected` |
|
|
| `.no-options` | `.vs__no-options` |
|
|
| `.spinner` | `.vs__spinner` |
|
|
| `.close` | `.vs__deselect` |
|
|
| `.active` | `.vs__active` |
|
|
|
|
## Internal State
|
|
|
|
**The changes listed below are very unlikely to break your apps** unless you've been hooking into
|
|
vue-select internal values. [#781](https://github.com/sagalbot/vue-select/pull/781)
|
|
(thanks [@owenconti!](https://github.com/owenconti)) introduced a number of optimizations to the
|
|
way that the component handles internal state.
|
|
|
|
- `value`: the `value` prop is undefined by default. vue-select no longer maintains an internal `mutableValue` state when a `value` prop has been passed. When `:value` or `v-model` is not used, vue-select will maintain internal state using the `_value` property.
|
|
- `mutableOptions` has been removed in favor of an `optionList` computed property.
|
|
|
|
## Misc
|
|
|
|
- `fade` transition renamed to `vs__fade`
|
|
- Removed `a` element that was serving as the click handler within dropdown options
|