Vue.js - Emit event from directive

Question

Is it possible to emit a custom event from the directive in the component to which this directive is attached.

I was expecting it to work as described

Answer 1

@euvl's solution is fine, but i think it's easier and cleaner to just pass a function as an argument to your directive. Seems to simplify the interface to your directive as well.

<script>
  Vue.directive('foo', {
    bind(el, binding) {
      setTimeout(() => {
        binding.value();
      }, 3000);
    }
  });
</script>

<template>
  <button v-foo="change">{{label}}</button>
</template>

<script>
  export default{
    data() {
      return {
        label: 'i dont work'
      }
    },
    methods: {
      change() {
        this.label = 'I DO WORK!';
      }
    }
  }
</script>