How i can emit event from directive by click outside of element?

Question

I can't understand how to emit event from directive

This is my template where i try to call method :

<tooltip v-click-outside="clickEvent" v-on:emitedEvent="clickEvent"></tooltip>

From v-click-outside="clickEvent" i got:

Property or method "clickEvent" is not defined on the instance but referenced during render.

My code:

export default {
  data() {
    return {
    }
  },
  methods: {
    clickEvent: function () {
      console.log('click')
    }
  },
}
Vue.directive('click-outside', {
  bind: function (el, binding, vnode) {
    el.event = function (event) {
      if (!(el.contains(event.target))) {
          vnode.context.$emit('emitedEvent')
      }
    }
    document.addEventListener('click', el.event)
  },
  unbind: function (el) {
    document.removeEventListener('click', el.event)
  },
})

I get:

Invalid handler for event "emitedEvent": got undefined

Possible duplicate of [How do I detect a click outside an element?](https://stackoverflow.com/questions/152975/how-do-i-detect-a-click-outside-an-element) — Pogrindis, Jan 08 '19 at 10:30

score 0 · Accepted Answer · edited Jul 15 '22 at 05:38

I suspect the problems you're encountering are primarily based on two problems:

the level at which you're defining the functions
camel case custom events are not supported (always use kebab case - https://v2.vuejs.org/v2/guide/components-custom-events.html#Event-Names)

Check out the following fiddle - https://jsfiddle.net/chrismarx/gvrsmj1y/7/

Note that using this template:

<div id="app">
  <h2>directive test</h2>
  <component-a v-on:emited-event="parentClickEvent"></component-a> 
</div>

The root component has to define the parentClickEvent method, since the event is being emitted from component-a. You also need to emit the event from within component-a

  template:'<button type="button" @click="clickEvent" v-click-outside>test</button>',

or use the $root object for emitting and listening for events at the same level ( this.$root.$emit not working in Vue )

2. The $emit call should broadcast a kebab cased event, otherwise the event won't get picked up -

How i can emit event from directive by click outside of element?

1 Answers1