Skip to content

Event for clearable #1429

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
itlpps opened this issue May 12, 2021 · 23 comments
Open

Event for clearable #1429

itlpps opened this issue May 12, 2021 · 23 comments

Comments

@itlpps
Copy link

itlpps commented May 12, 2021

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

@darrinmn9
Copy link

+1

2 similar comments
@vitornovo54
Copy link

+1

@LucasVanni
Copy link

+1

@itlpps
Copy link
Author

itlpps commented May 13, 2021

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
Copy link

vitornovo54 commented May 13, 2021

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
Copy link

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
Copy link

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
Copy link

I also need this :)

@daniel007enirman
Copy link

any solutions

@daniel007enirman
Copy link

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
Copy link

@sagalbot Please pay attention

@SaqibSyed1014
Copy link

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
Copy link

ecuci commented Apr 29, 2022

+1

1 similar comment
@camille500
Copy link

+1

@itlpps
Copy link
Author

itlpps commented Jul 1, 2022

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
Copy link

mamlzy commented Jul 7, 2022

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
Copy link

+1

@sharan-mohandas-tfs
Copy link

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
Copy link

@clear="handleQuery"

@Iterator98
Copy link

Any update here?

3 similar comments
@Ali7med
Copy link

Ali7med commented Mar 14, 2024

Any update here?

@birdhouses
Copy link

Any update here?

@Ali7med
Copy link

Ali7med commented Jun 12, 2024

Any update here?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests