Is there any opportunities to share own methods in a custom directive around bind/unbind/update?
See original GitHub issueFor example, I would add a event listener when bind and remove it when unbind. So I wrote:
Vue.directive('xxx', {
bind: function () {
this.vm.handler = function () {...};
this.el.addEventListener('click', this.vm.handler);
},
unbind: function () {
this.el.removeEventListener('click', this.vm.handler);
delete this.vm.handler;
}
});
But the handler
is exposed out to vm
.
Is there any better way?
Thanks.
Issue Analytics
- State:
- Created 9 years ago
- Comments:13 (5 by maintainers)
Top Results From Across the Web
When does bind and unbind called in custom directives of Vue ...
This is where you can do one-time setup work. unbind: called only once, when the directive is unbound from the element.
Read more >Custom Directives - Vue.js
unbind : called only once, when the directive is unbound from the element. We'll explore the arguments passed into these hooks (i.e. el...
Read more >Creating Your First Vue Custom Directive - with Vue 3 Updates
In Vue, directives are one of the best ways to directly edit the DOM. Some examples are v-if , v-show , v-bind ,...
Read more >Directives In Depth - vue.js
Writing a Custom Directive · bind: called only once, when the directive is first bound to the element. · update: called when the...
Read more >Angular Directive Tutorial With Example | Custom Directives
Therefore, the component's own template may bind to any property of that component, with or without the @Input decorator. But a component or ......
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@jasonbodily @nevcos Do not know if this can meet your need?
Simply use the
el
parameter and define the destroy function in thebind
hookThe solution proposed by @HcySunYang looks like some kind of hack.
$destroy
is misleading as it seems like it’s something vue-related. It’s in fact an arbitrary key, usingel.i_am_a_banana
would work as well.@yyx990803 Can you confirm that this is the intended correct way of achieving this? Or maybe we should not remove event listeners at all? Does Vue’s DOM management guarantee that there will be no memory leak issues?