javascriptvue.jsvuejs2vue-directivescustom-directive

Multiple Elements with same custom directive vuejs


Hey there, I have some elements with the same custom directive but different values in my page.

I want to get all elements with that directive to process on them.

When I use this code:

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

it just gave me the first element with the can directive, not all of them, so how I can get all of the elements with the can directive?!

Update: my elements are like so:

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

I want to access all buttons with the v-can directive in page! How can it be done?


Solution

  • Following Vuejs documentation on custom directive, I would access all of them like this:

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