When a client commissioned us a single page application that will have to handle multiple input affecting the page behavior real time, we were faced with a tough choice: tackle the problem with JS+ JQuery or try a more modern front-end framework.

Vue is a promising rising stars into the vast javascript front end frameworks echo system and offers a solid MVVM control of the page, so the decision came naturally.

We decided to set up a parent component that holds all the different information, and then have some child components that handles the user interaction.
This way we delegate the parent to handle the communication between child-user interaction and the back-end server.

If you are not familiar with Vue don’t worry: playing around with the fiddle will makes everything clearer.
The input has its own set of value innerData that thanks to v-model="innerData" will stay in sync.
Then on a DOM event on the input call the method emitValue() to emit the new set of values to the parent that, thanks to v-model="outerData" will “pick up” the event and change its data accordingly.

This way, in theory, we can delegate the input to performs different actions if needed, and when ready emit the data to the parent.

The problem.

Unfortunately this arise a problem: different browsers prioritize events differently.
That’s why one input listen for click and the other for change; so we can clearly see the difference.

If you try it into different browsers you’ll see that the behavior change.

So how can we expect consistency among different browser when events are picked up in different orders?

Our solution.

We decided to let Vue’s reactivity handle the functionality, avoiding entirely the usage of click or change.

Vue allows the usage of computed properties, as well as watchers, so we can set one on the property that the v-model is watching and let it emit that an input has changed.