Vue: Vue updating data before or after click event depending on browser

Created on 22 Jun 2016 · 3Comments · Source: vuejs/vue

Vue.js version

v1.0.20

Reproduction Link

Steps to reproduce

Chrome/Firefox behave one way while IE 11/Edge behave a different way.

Chrome/Firefox - If you click on the check box changing it from a false to true state, vue DOES NOT update the row.selected value to true BEFORE the click event.

IE 11/Edge - If you click on the check box changing it from a false to true state, vue DOES update the row.selected value to true BEFORE the click event.

same thing going from true to false states

Source

loki0609

Most helpful comment

We solved this problem by wrapping our logic of the change-handler in Vue.nextTick. Then you always access the updated values.
Another solution could be a watcher on the property.

katebe on 19 Jun 2017

👍2

All 3 comments

Different browsers trigger change and click events in different orders, this is not something Vue can change nor is Vue responsible for normalizing this behavior. You should be listening to the change event instead of click.

yyx990803 on 23 Jun 2016

👍1

We solved this problem by wrapping our logic of the change-handler in Vue.nextTick. Then you always access the updated values.
Another solution could be a watcher on the property.

katebe on 19 Jun 2017

👍2

Accepted answer should be Evan's one. That works in every case.