Events

If you have the need for custom events, please open an issue on the GitHub repository with your use case and we will be happy to investigate it.

@option-selected

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

<template>
  <VueSelect
    v-model="selectedValue"
    :options="options"
    @option-selected="(option) => console.log(option.label, option.value)"
  />
</template>

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

INFO

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).

const options = [{ label: "France", value: "FR" }, { label: "Spain", value: "ES" }];
const activeValue = ref<string>();
const selectedOption = computed(() => options.find((option) => option.value === activeValue.value));

@option-deselected

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

<template>
  <VueSelect
    v-model="selectedValue"
    :options="options"
    @option-deselected="(option) => console.log(option.label, option.value)"
  />
</template>

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

@search

Emitted when the search value is updated.

WARNING

Search value is cleared when the menu is closed. This will trigger an empty string emit event. See tests implementations for more details.

<template>
  <VueSelect
    v-model="selectedValue"
    :options="options"
    @search="(search) => console.log('search value:', search)"
  />
</template>