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 😆

[danimalweb]

I also need this :)

[daniel007enirman]

any solutions

[daniel007enirman]

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"
/>

better create PR for this

[akulmambetov]

@sagalbot Please pay attention

[SaqibSyed1014]

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"
/>

Is this fix added to the current package yet?

[ecuci]

+1

[camille500]

+1

[itlpps]

One year later, using the same component in another project and still don't have this event :( I made a fork and implemented this for myself, using vue 3 (v4.0.0-beta.3)

yarn add git+https://github.com/itlpps/vue-select.git#event-cleared

usage:

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

[mamlzy]

One year later, using the same component in another project and still don't have this event :( I made a fork and implemented this for myself, using vue 3 (v4.0.0-beta.3)

yarn add git+https://github.com/itlpps/vue-select.git#event-cleared

usage:

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

thanks @itlpps it works, but console gave me a warning like this : "option:cleared" but it is neither declared in the emits option nor as an "onOption:cleared" prop.

How to fix this by the way?

[igorespin]

+1

[sharan-mohandas-tfs]

Since we don't have an explicit event yet, pasting the snippet of the workaround I used.

watch: {
    search(value) {
        if (value === null) {
            // Your logic here
        }
    },
}

<v-select v-model="search">

[gotoworld]

@clear="handleQuery"

[Iterator98]

Any update here?

[Ali7med]

Any update here?