如何使用指令添加 v-select (Vuetify) 更改的自定义事件侦听器？答案

【问题标题】：如何使用指令添加 v-select (Vuetify) 更改的自定义事件侦听器？
【发布时间】：2020-11-06 04:34:23
【问题描述】：

我有 v-select 元素

<v-select
 :items="[1, 2, 3]"
 label="Some items"
 v-mydirective
></v-select>

和指令：

Vue.directive("mydirective", {
  bind: function(el, binding) {
    el.addEventListener("click", function(event) {
      console.log("clicked");
    });
  }
});

当我点击选择时，控制台中会出现“已点击”的消息，但如果我在项目列表中选择某些项目，则不会。我不仅想在选中项目时调用函数，而且还希望将选定的项目传递给指令中的这个函数。

有没有办法做到这一点？

UPD：在一些cmets之后，我想补充一下：

我知道，我可以做到

<v-select
 :items="[1, 2, 3]"
 label="Some items"
 @input="someFunc"
></v-select>

但这不是我需要的。我必须做指令。

“更改”事件不起作用

【问题讨论】：

代替click，监听change事件

标签： vue.js vuetify.js

【解决方案1】：

无需为此创建自定义指令。您已经在点击和选择时发送了事件：

<v-select
 :items="[1, 2, 3]"
 label="Some items"
 @click="doSomeThing"
 @change="doSomeThing"
></v-select>
```

【讨论】：

谢谢，但我知道这一点以及“@input”，但我仍然需要自定义事件
在组件上添加指令会导致将指令添加到组件内的根元素。因此，如果您不知道组件是如何实现的，那么很难创建自定义行为...我的猜测是遍历 elchilds 直到找到 select 元素并附加 change 事件侦听器给它。
@Виктор 不需要@input，可以使用v-model绑定变量

【解决方案2】：

问题通过以下方式解决：

Vue.directive("mydirective", {
  bind: function(el, binding, vnode) {
    if (vnode.componentInstance)
      vnode.componentInstance.$on("input", function(item) {
        console.log("input item: ", item);
      });
  }
});

【讨论】：