具有相同自定义指令的多个元素vuejs

Question

你好，我在网页上有一些使用相同自定义指令但值不同的元素。

我想获取所有带有该指令的元素以对它们进行处理。

当我使用以下代码时：

Vue.directive('can', function (value) {
    console.log(value)
})

它只返回了第一个带有can指令的元素，而不是所有的，那么我该如何获取所有带有can指令的元素呢？！

更新： 我的元素就像这样:

<button v-can="'register-permission'">Register</button>
<button v-can="'buy-permission'">Buy</button>
<button v-can="'Sell-permission'">Sell</button>

我想在页面中使用 v-can 指令访问所有按钮！怎样实现？

- Katerou22

---

我认为你需要让指令保持元素的注册表。 - Roy J

正如@RoyJ所指出的那样，可以这样做：let cans = []; Vue.directive（'can'，{ inserted: function（el，binding）{ cans.push（{el：el，value：binding.value}） console.log（JSON.stringify（cans）） } }） - Sphinx

我知道这听起来很愚蠢，也没有太多意义...但是如果你在每个按钮上放置一个唯一的key，会发生什么呢？- 也许Vue正在错误地尝试重复使用您的按钮 ¯_(ツ)_/¯ - Sølve T.

@Sphinx，还是给我第一个使用can指令的元素吧！因为我想在监听器上获取更新后的指令，就像这样：Bus.$on('permissionChanged', function (data) { let cans = [] Vue.directive('can', function (el, binding, vnode) { cans.push(el) console.log(cans) }) }) - Katerou22

Answer 1

根据Vuejs 自定义指令 的文档，我可以像这样访问它们：

Vue.directive('can', {
  bind: function (el, binding, vnode) {
    console.log(binding.expression)
  }
})

- Lucas