[Vuejs]-How i can emit event from directive by click outside of element?

by

0👍

✅

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

  1. the level at which you’re defining the functions
  2. 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>
  1. 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 –

Leave a comment