-
-
Notifications
You must be signed in to change notification settings - Fork 33.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Custom directive binds differs on components vs elements #9876
Comments
Seems like the directive is called with the old component (because it's reused) but it still has old attrs As a workaround, set a key on one of the components |
@bponomarenko https://vuejs.org/v2/guide/conditional.html#Controlling-Reusable-Elements-with-key |
The optimization is based on that you have stateless elements so Vue won’t bother to take care of correctly managing event handlers or local states when trying to reuse an element. So I think this is not a bug but can be potentially improved in our docs so that our users can understand this more easily. |
@Justineo I understand the concepts behind an optimization itself. In my situation, custom directive is responsible for adding the state attribute to element on |
|
I am using a directive of vue-clipboard2 and this bug happened, the bug report comes from 2019: Inndy/vue-clipboard2#75 I've made a PR there that would bypass this issue, but like @bponomarenko said, the order should be fixed. Doesn't make sense for a directive to start to unbind without bind it first. |
Version
2.6.10
Reproduction link
https://jsfiddle.net/bponomarenko/uom10qd2/
Steps to reproduce
What is expected?
Directive will emit the same console messages when applied to DOM elements and to components (on init and after click on button).
I'm not sure what should be expected output. Either
or
What is actually happening?
Messages from the directive are the same on init, but different after button have been clicked.
Actual console output:
It seems that order in which directives are applied to DOM elements and components are different. In my setup I have custom directive which relies on some DOM attribute with configuration data. When this custom directive is bound/unbound in a "regular flow" – everything works as expected (directive binds after element attributes are updated). However when directive is bound/unbound in case of Vue "in-place patch strategey", behavior seems to be different.
The text was updated successfully, but these errors were encountered: