Execution order of JQ and vue binding events

there is an input element. JQ binds a change event, and vue"s v-on binds a change event. Now, when the change event is triggered, the event bound by JQ is executed first. How to control the change event that allows him to execute the vue first?

Apr.03,2022

bind vue first. Then wait for vue to finish processing and then trigger the event in vue. Of course, these two events cannot be renamed. Custom events are required.


in principle, it is not efficient to bind the same event twice, so we should figure out how to merge events.
from the point of view of the problem, you can first use jquery to listen to a property of dom. When vue triggers change, you can change this property, thus triggering the listening event of jquery


which may be related to the order in which you bind


in my test, VUE is triggered before JQUERY every time. Combined with the process of HTML rendering, JQUERY's $(document) .ready is after the DOM tree is generated. While the JAVASCRIPT scripts are executed sequentially during the DOM spanning tree, VUE has already created the methods during created. I personally guess this may be the reason.
back to the question, if JQUERY executes first, the easiest way is to nest JQUERY in VUE and write only one listener @ change

Menu