CODEWITHSUNDEEP
vue.js
4e4e4i
4e4e4i

Reputation: 121

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

I need to call method of element from directive and pass some parameters to this method.

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

<script>
Vue.directive('keyboardtrap', {
  bind: function (el, binding, vnode) {
    el.addEventListener('keydown', onKeyDown);

    function onKeyDown(e) {
      vnode.context.$emit('mousetrapped', e)
    }
  },
})

new Vue({
  el: '#app',
  methods: {
    trapped (e) {
      alert('trapped' + e)
    }
  }
});
</script>

This example on codepen: https://codepen.io/4e4e4i/pen/OJLewNr

Upvotes: 0

Views: 1111

Answers (1)

Jai Kumaresh
Jai Kumaresh

Reputation: 835

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

Upvotes: 1

Related Questions