vue.jsのブラウザ毎のcheckboxクリック時の取得値の違い

違うんですね

最近vue.jsを勉強しているのですが、どうもcheckboxのクリックイベントで取得できる値がブラウザ毎に異なる事に気付きました。

恐らく超が付くほどの初歩的な内容だと思いますが、忘れないようメモしておきます。

clickイベントで取得できる値

ブラウザ毎に挙動が・・

いろいろ簡単なサンプルを作っていたところ、checkboxにv-on:clickでイベントを設定した時、イベント内で取得できるチェックボックスの選択値が、safariとchrome・firefoxで異なる事に気づきました。

以下をsafariと、chromeまたはfirefoxでそれぞれ実行してみて下さい。value値が異なる事が確認できます。

safariはcheckboxをチェックした後の値が取得できますが、chromeとfirefoxはチェックする前の値が取得されます。

vue.jsのバグでは無さそう

一瞬バグかと思ったのですが、どうも違うようです。

update, this is not a bug. The problem is with how the events are being triggered by each browser. Firefox/Chrome are firing the click even before the change event so Vue doesn't pick it up.

http://forum.vuejs.org/topic/596/how-can-i-get-the-latest-dom-status-on-both-firefox-and-chrome/3

ブラウザの実装によって返る値が違う、ということのようですね。

対応するにはmethodsに定義せずwatchに定義する

このように、checkboxModelをwatchで定義して状態変化を監視すると、変更前と変更後の値を取得する事ができます。状態変化＝checkboxのクリックとほぼ同義なので、これで代用できそうです。

雑感

ブラウザの実装の問題だとすると、この問題は恐らく他のFWにも同じ事が言えると思うのですが、どうなのでしょうね。

正直こういうブラウザの実装によって挙動が変わるとか、IE6問題の再来のようで死ぬほどアホくさいです。本来開発者が集中するべきところはそこではないので、なんとかして欲しいものですが、どうにもならないのでしょうね・・・

AngularJS　アプリケーションプログラミング

速習ECMAScript6: 次世代の標準JavaScriptを今すぐマスター！