A problem I encountered before was that the VUE framework has done some processing, so that when we add new elements when rendering DOM through v-for, the binding event can also be effective for the newly added elements.
The problem encountered this time is that the original binding event (the function is not written in the methods of the vue instance), causing the bubbling event to fail. Neither return false or (); is valid.
At this time, it is necessary to handle it by providing event modifiers with VUE, such as preventing event bubbles @='xx()'
.stop
.prevent
.capture
.self
.once
<a v-on:="doThis"></a> <!-- Submit event no longer reloads the page --> <form v-on:="onSubmit"></form> <!-- Modifiers can be concatenated --> <a v-on:="doThat"></a> <!-- Only modifiers --> <form v-on:></form> <!-- Use event capture mode when adding event listeners --> <div v-on:="doThis">...</div> <!-- Only when the event is in the element itself（For example, it is not a child element）Trigger callback when triggered --> <div v-on:="doThat">...</div>
The above article solves the problem of preventing bubbling and failure caused by binding events is all the content I share with you. I hope you can give you a reference and I hope you can support me more.