Comment détecter l'événement de clic sur le bouton d'effacement sur v-select (vue-select)

Question

Je crée un menu déroulant dans v-select et après avoir sélectionné une option lorsque vous cliquez sur le bouton Effacer, je dois effacer le menu déroulant et modifier le tableau d'options à l'étape initiale.

Comment vérifier si le bouton Effacer (x) est cliqué, j'ai essayé d'utiliser on-change 用于获取所选值，它工作正常，而 @click etc et aucun d'entre eux ne fonctionne, aidez-moi s'il vous plaît.

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

J'attends avec impatience un moyen de gérer les événements d'effacement des listes déroulantes.

Answer 1

Puisque nous n’avons pas encore de 事件，因此我们可以通过观察v-modelvaleur explicite pour mettre en œuvre cette exigence.

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

Démonstration live sur demande :

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>