I recently encountered a problem while trying to create a basic Vue directive. I faced difficulty accessing 'this' within the directive code. Despite following an example from the official Vue documentation and not using arrow functions, this issue persisted.
To replicate the problem: https://codesandbox.io/s/suspicious-lichterman-forud
Vue version being used: v2.6.11
The directive in question:
// The 'console.log' statement produces 'undefined'
// Attempts were made to place this code in main.js / App.vue
Vue.directive("example", {
twoWay: true, // Experimented with setting this as false / true
bind: function() {
console.log(this);
},
unbind: function() {
console.log("unbind", this);
}
});