Question

我有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：在评论后，我要添加：

我知道，我可以做

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

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

“更改”事件无效

Answer 1

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

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

Answer 2

问题已通过以下方式解决：

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

如何使用derective添加v-select（Vuetify）更改的自定义事件监听器？

2 个答案: