I've got an error when tried to declare a variable in the usual way like this:
Vue.directive('my-directive', {
varA: '',
inserted: function(el, binding, vnode){
this.varA = 'test'; // TypeError: Cannot set property
// 'varA ' of undefined
},
});
TypeError: Cannot set property 'varA ' of undefined
How do you declare variables in Vue directives?
In Vue directives, when you need to store a value it is generally stored on the element.
Vue.directive('my-directive', {
inserted: function(el, binding, vnode){
el.varA = 'test';
},
});
The element is passed in as an argument to each of the lifecycle events in a directive and you can access the value later from el.varA.
There seems to be 2 ways for this:
According to this comment on github, you may define a stateful directive like this:
Vue.directive('my-directive', (() => {
let varA = '';
return {
inserted: function(el, binding, vnode){
varA = 'test';
},
};
})());
According to a note box on Vue.js docs:
If you need to share information across hooks, it is recommended to do so through element’s dataset.
Vue.directive('my-directive', {
inserted: function(el, binding, vnode){
el.dataset.varA = 'test';
},
});
varA is a variable that has the same state for every directive of the kind my-directive. If you need a state save it to the element.
WeakMap to index state per bound element. There is a single WeakMap for all instances of the directive, but each directive can only access its own element’s state through the WeakMap. Since it’s not a regular Map, it also avoids memory leaks due to the key not being counted as a reference by the garbage collector.Your this is not what you think it is. If you do console.log(this) inside your function, you'll see that this is the window.
Looking at the doc, directives are for '...cases where you just need some low-level DOM access on plain elements'. So there's no provision for directives to have state. I suspect you need a component, not a directive. What are you trying to do? You can go a long way in vue without ever needing to write a directive.
initialState property to your viewModel, then, when you need to, state = initialState, and the changes flow onto your page.