[Vuejs]-How to call the method of element and pass arguments from directive Vue.js?

1👍

For my solution. It’s needToPassDatas is you needed to pass an argument data

<div id="app">
  <div>
      <button @mousetrapped="trapped"  v-keyboardtrap="needToPassDatas">
          keyboardtrap
      </button>
  <div/>
</div>

Vue.directive('keyboardtrap', {
  bind: function (el, binding, vnode) {

    el.addEventListener('keydown', onKeyDown);

    function onKeyDown(e) {
       var handlers = (vnode.data && vnode.data.on) ||
                      (vnode.componentOptions && vnode.componentOptions.listeners);

       if (handlers && handlers['mousetrapped']) {
          handlers['mousetrapped'].fns(binding.value);
       }
    }
  },
})

new Vue({
  el: '#app',
  methods: {
    trapped (e) {
      alert('trapped' + e)
    }
  }
})

Ref by: vuejs.org Dynamic Directive Arguments, stackoverflow.com Trigger emit in directive method

Leave a comment