how to define a method inside the Vue directive?
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) }}
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>
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 () => {}.