how to define a method inside the Vue directive?

Question

I have directive and I wanted to create a local method inside the directive and use it in the hook function. Here's my code:

export const OutsideClick = {
  bind (el, binding, vnode) {
    console.log(new Vue());
    // call method1()
  },
  componentUpdated(el, binding, vnode) {
    console.log('updated comp', binding);
    if(binding.value[1]()) {
      // call method1();
    }
  },
  unbind(el, binding, vnode) { 
    console.log('unbinding');
  }
}

So at this point how to define the function inside the directive and use it inside the bind and componentUpdated ?

Answer 1

Maybe someone will find it helpful. The trick is to wrap a directive with a constructor function.

function myDirective() {
  this.myMethod = function() {
    console.log('My method')
  }
  return {
    bind: function(el) {
      el.addEventListener('click', this.myMethod)
    }.bind(this),
    update: function() {
      this.myMethod()
    }.bind(this),
    unbind: function(el) {
      el.removeEventListener('click', this.method)
    }.bind()
  }
}

Vue.directive('myDirective', new myDirective())
new Vue({
  el: '#app'
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button v-my-directive>Just a button</button>
</div>

Also functions with .bind(this) could be replaced with lambdas () => {}.

Answer 2

Well, you need to add the function outside of the directive and call it inside the lifecycle methods as per below example.

Vue.directive("color", {

  "bind": function() {
    console.log("directive active");
    hello();
  },


  "unbind": function() {
    console.log("directive deactive");
  },


  "update": function(newValue, oldValue) {
    var el = $(this.el); 


    if (this.arg == 'background')
      el.css('background', newValue);
    else
      el.css('color', newValue);
  },
});

function hello() {
  console.log('hello');
}

new Vue({
  el: '#app'
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.24/vue.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

<div id="app">
  <h2>Color</h2>
  <select v-model="color">
    <option value="#f00">Red</option>
    <option value="#0f0">Green</option>
    <option value="#00f">Blue</option>
    <option value="#000" selected>Black</option>
  </select>
  <br><br>
  <div v-color="color">
    Hello world!!!
  </div>
  <h2>Background</h2>
  <select v-model="color2">
    <option value="#f00">Red</option>
    <option value="#0f0">Green</option>
    <option value="#00f">Blue</option>
    <option value="#000" selected>Black</option>
  </select>
  <br><br>
  <div v-color:background="color2">
    Hello world!!!
  </div>

</div>

Answer 3

I don't think you can add a method inside the directive itself. But you can declare the method outside the directive and call it from inside it.

function method1 (el, binding, vnode) {
 ...
}

export const OutsideClick = {
 bind (el, binding, vnode) {
  console.log(new Vue());
  method1(el, binding, vnode)
 },
 componentUpdated(el, binding, vnode) 
 {
  console.log('updated comp', binding);
  if(binding.value[1]()) {
   method1(el, binding, vnode)
  }
 },
 unbind(el, binding, vnode) { 
  console.log('unbinding')
  method1(el, binding, vnode)
 }
}