While working on creating a drop-down using v-select, I encountered an issue. After selecting an option, I needed to clear the drop-down and revert the option array back to its initial stage upon clicking the clear button.
I attempted various methods such as using on-change to retrieve the selected value, but none of them seemed to work when trying to detect if the clear button (x) was clicked. Any assistance would be greatly appreciated.
<template>
<v-select
v-model="selected"
:reduce="(option) => option.id"
:options="[
{ label: 'One', id: 1 },
{ label: 'Two', id: 2 },
]"
@onChange="searchProduct"
/>
</template>
<script>
export default {
data() {
return {
selected: 3,
}
},
methods(){
searchProduct(selected){
console.log('selected value ',selected)
}
}
</script>
I am looking for suggestions on how to create a method that can handle the event of clearing the drop-down.