搜索

首页  >  问答  >  正文

如何检测v-select(vue-select)上的清除按钮点击事件

我在 v-select 中创建一个下拉菜单,在单击清除按钮时选择一个选项后,我需要清除下拉菜单并将选项数组更改为初始阶段。

如何检查清除按钮(x)是否被单击,我尝试使用 on-change 用于获取所选值,它工作正常,而 @click 等都不起作用,请帮助我。

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

我期待一些方法来处理下拉清除事件。

P粉436688931P粉436688931338 天前480

全部回复(1)我来回复

  • P粉311464935

    P粉3114649352023-12-28 09:43:47

    由于我们还没有任何显式的事件,因此我们可以通过观察v-model值来实现此要求。

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

    根据要求进行现场演示

    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>

    回复
    0
  • 取消回复