how to detect clear button click on v-select (vue-select)

Question

I was creating a drop-down in v-select, after selecting a option when clicking on clear button I need to clear the drop down and change option array to initial stage.

How to check clear button (x) is clicked or not, I tried with on-change is used to get selected value it is working properly and @click etc. none of them working, please help me.

<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'm expecting something methods to handle drop-down clear event.

I'm not quite understanding - do you want to update the options when one has been selected? You mention a clear button but it's not in your example. Double check that onChange prop is supported, vue-select.org/guide/upgrading.html#onchange-oninput mentions :on-change or @input depending on the version used. — user115014
– user115014, Commented Nov 21, 2022 at 11:52
@vishalkrishna I added an answer, Hope it will work as per your requirement. — Rohìt Jíndal
– Rohìt Jíndal, Commented Nov 22, 2022 at 6:58

Rohìt Jíndal · Accepted Answer · 2022-11-21 11:51:45Z

As we don't have any explicit event yet, we can achieve this requirement by watching the v-model value.

watch: {
    selected(value) {
        if (!value) {
            // Your logic here
        }
    }
}

Live Demo as per the requirement :

Vue.component("v-select", VueSelect.VueSelect);

new Vue({
  el: "#app",
  data: {
    selected: 3
  },
  watch: {
    selected(value) {
      if (!value) {
        this.selected = 3;
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-select/3.10.3/vue-select.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-select/dist/vue-select.css"/>
<div id="app">
  <v-select
    v-model="selected"
    :reduce="(option) => option.id"
    :options="[
      { label: 'One', id: 1 },
      { label: 'Two', id: 2 },
    ]"
  />
</div>

Collectives™ on Stack Overflow

how to detect clear button click on v-select (vue-select)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related