Bagaimana untuk mengesan acara klik butang jelas pada v-select (vue-select)

Question

Saya sedang mencipta menu lungsur turun dalam v-select dan selepas memilih pilihan apabila butang jelas diklik, saya perlu mengosongkan menu lungsur turun dan menukar tatasusunan pilihan ke peringkat awal.

Bagaimana untuk menyemak sama ada butang jelas (x) diklik, saya cuba menggunakan on-change 用于获取所选值，它工作正常，而 @click dan lain-lain dan tiada satu pun daripada mereka berfungsi, tolong bantu saya.

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

Saya menantikan beberapa cara untuk mengendalikan acara jelas jatuh turun.

Answer 1

Memandangkan kami belum mempunyai sebarang 事件，因此我们可以通过观察v-modelnilai yang jelas untuk melaksanakan keperluan ini.

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

Demonstrasi secara langsung atas permintaan:

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>