如何检测vue-select（v-select）的清除按钮点击事件

v-select的清除按钮点击后，会自动把绑定的v-model值设为null，不需要直接监听清除按钮的点击事件，通过以下两种方式就能实现需求：

方法一：在现有@onChange事件中处理 #

把选项数组抽成data变量，方便恢复初始状态，然后在事件处理函数里判断选中值是否为null，如果是就重置选项数组：

<template>
  <v-select
    v-model="selected"
    :reduce="(option) => option.id"
    :options="currentOptions"
    @onChange="searchProduct"
  />
</template>

<script>
export default {
  data() {
    const originalOptions = [
      { label: 'One', id: 1 },
      { label: 'Two', id: 2 },
    ];
    return {
      selected: 3,
      originalOptions,
      currentOptions: [...originalOptions] // 初始赋值为原数组的副本
    }
  },
  methods: {
    searchProduct(selected) {
      console.log('selected value ', selected);
      // 判断是否触发清除操作
      if (selected === null) {
        // 恢复选项数组到初始状态
        this.currentOptions = [...this.originalOptions];
      } else {
        // 正常选中后的业务逻辑
      }
    }
  }
}
</script>

方法二：用watch监听v-model变化 #

如果不想在change事件里混写逻辑，也可以单独监听selected的变化：

<template>
  <v-select
    v-model="selected"
    :reduce="(option) => option.id"
    :options="currentOptions"
    @onChange="searchProduct"
  />
</template>

<script>
export default {
  data() {
    const originalOptions = [
      { label: 'One', id: 1 },
      { label: 'Two', id: 2 },
    ];
    return {
      selected: 3,
      originalOptions,
      currentOptions: [...originalOptions]
    }
  },
  methods: {
    searchProduct(selected) {
      console.log('selected value ', selected);
      // 正常选中后的业务逻辑
    }
  },
  watch: {
    selected(newVal) {
      if (newVal === null) {
        // 清除后恢复选项数组
        this.currentOptions = [...this.originalOptions];
      }
    }
  }
}
</script>

注：如果使用的是标准vue-select组件，正确的事件名是@change而非@onChange，可根据实际组件的事件定义调整。

内容的提问来源于stack exchange，提问作者vishal krishna