Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 20d46c2

Browse files
committedFeb 18, 2025··
feat(docs): update events docs
1 parent 750986f commit 20d46c2

File tree

2 files changed

+29
-25
lines changed

2 files changed

+29
-25
lines changed
 

‎docs/events.md

+29-6
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@ title: 'Events'
44

55
# Events
66

7-
If you have the need for custom events, please open an issue on the [GitHub repository](https://github.com/TotomInc/vue3-select-component) with your use case and we will be happy to investigate it.
8-
97
## `@option-selected`
108

119
Emitted when an option is selected, in the same tick where the `v-model` is updated.
1210

11+
**Payload**: `Option` - The selected option.
12+
1313
```vue
1414
<template>
1515
<VueSelect
@@ -23,19 +23,23 @@ Emitted when an option is selected, in the same tick where the `v-model` is upda
2323
**Note**: this is emitted on the same tick as the v-model is updated, before a DOM re-render.
2424

2525
::: info
26-
If you want to keep track of the selected option, it is recommended to use a `computed` combined with the `v-model`, instead of this event ([see this issue comment](https://github.com/TotomInc/vue3-select-component/issues/7#issuecomment-2083422621)).
26+
For keeping track of the selected option, it's recommended to use a `computed` property combined with the `v-model` instead of relying on the `@option-selected` event. This approach is more efficient and aligns better with Vue's reactivity system. Here's an example:
2727

2828
```ts
29-
const options = [{ label: "France", value: "FR" }, { label: "Spain", value: "ES" }];
30-
const activeValue = ref<string>();
31-
const selectedOption = computed(() => options.find((option) => option.value === activeValue.value));
29+
const options = [{ label: "France", value: "FR" }];
30+
const activeValue = ref("FR");
31+
const selectedOption = computed(
32+
() => options.find((option) => option.value === activeValue.value),
33+
);
3234
```
3335
:::
3436

3537
## `@option-deselected`
3638

3739
Emitted when an option is deselected, in the same tick where the `v-model` is updated.
3840

41+
**Payload**: `Option` - The deselected option.
42+
3943
```vue
4044
<template>
4145
<VueSelect
@@ -48,10 +52,29 @@ Emitted when an option is deselected, in the same tick where the `v-model` is up
4852

4953
**Note**: this is emitted on the same tick as the v-model is updated, before a DOM re-render.
5054

55+
## `@option-created`
56+
57+
Emitted when a new option is created with the `:taggable="true"` prop.
58+
59+
**Payload**: `string` - The search content value.
60+
61+
```vue
62+
<template>
63+
<VueSelect
64+
v-model="selectedValue"
65+
:options="options"
66+
:taggable="true"
67+
@option-created="(value) => console.log('New option created:', value)"
68+
/>
69+
</template>
70+
```
71+
5172
## `@search`
5273

5374
Emitted when the search value is updated.
5475

76+
**Payload**: `string` - The search content value.
77+
5578
::: warning
5679
Search value is cleared when the menu is closed. This will trigger an empty string emit event. See tests implementations for more details.
5780
:::

‎docs/props.md

-19
Original file line numberDiff line numberDiff line change
@@ -254,22 +254,3 @@ The label of an option is displayed in the dropdown and as the selected option (
254254
Resolves option data to a string to compare options and specify value attributes.
255255

256256
This function can be used if you don't want to use the standard `option.value` as the value of the option.
257-
258-
## Events
259-
260-
### option-created
261-
262-
Emitted when a new option is created with the `:taggable="true"` prop.
263-
264-
**Payload**: `string` - The search content value.
265-
266-
```vue
267-
<template>
268-
<VueSelect
269-
v-model="selectedValue"
270-
:options="options"
271-
:taggable="true"
272-
@option-created="(value) => console.log('New option created:', value)"
273-
/>
274-
</template>
275-
```

0 commit comments

Comments
 (0)
Please sign in to comment.