Vue-select: Event for clearable

[itlpps]

I want get an event when click on "x" for clear, please

[darrinmn9]

+1

[vitornovo54]

+1

[LucasVanni]

+1

[itlpps]

I solved this with patch-package.

Replace node_module/vue-select/dist/vue-select.js for this content vue-select.js and apply a new patch.

Usage:

<v-select
    ...
    @option:clear="onClear"
/>

[vitornovo54]

Or you can resolve this in a more elegant way.
Vue-selects offer a way to define the component. So you can simple use vue render function to mount any event. I currently creating a render function then adding an $emit. Since it's a component, all you need to do is to listen it in the parent. It's more work but it will maintain the package without actually patching it.

in your view

<v-select 
  :components="{Deselect}"
/>

in your vue or component. I'm currently using in a component.

...
data() {
  return {
    Deselect: {
      render: (createElement) => {
          return createElement('span', {
            on: {
              click: ()=>{
                this.$emit('deselect',this);
              }
            }
          },'❌');
      }
   }
 }
...

Then you can mount a listener for example in the created state.

created(){
    this.$on('deselect',this.someMethod);
},

https://vue-select.org/guide/components.html#deselect

[darrinmn9]

I realize there are possible work arounds, so thanks to those who commented. but it just strikes me as odd that a component exposes an "X" button that you can click, wouldn't expose a custom event to listen for that button click.

[vitornovo54]

yeah, me too 😩. That's why I'm doing this way. It will be updated once available without yet including another package. As you just saw, you're not alone in this topic 😆