この記事の結論3行まとめ
- Vue.jsのv-modelでcheckboxの値が反映されない場合は、v-bind:checkedと@changeイベントを使って対応するのが効果的。
- v-modelは外部イベント（Seleniumなど）に反応しないことがあり、イベント検知とデータ更新の分離が安定動作のカギ。
- v-modelの仕様を理解し、適切なバインディングとイベントハンドリングで柔軟なフォーム制御が可能。
こんにちは、現役沖縄フリーランスエンジニアのmah（MaLanka）です。
このブログでは、
僕がIT未経験から約1年でフリーランスエンジニアになるまでの過程、
ノウハウなどを書いていきます。
今回は、
- 【Vue.js
】v-modelでcheckboxの値の変更が反映されない
について書いていきます。
【Vue.js】v-modelでcheckboxの値の変更が反映されない
v-modelでcheckboxの変更が反映されない場合は、v-bind:checkedで初期値設定し@changeイベントで反転代入する2つの処理に分離するパターンで解決します(2026年5月時点)。
フォームのsubmit時、
checkboxだけ変更後の値が反映されなかった（true、falseが切り替わらなかった）ので備忘録。
結論はどう書く？
v-modelを使わず、
「初期値設定(v-bind)」と「変更を検知して代入(changeイベント)」のように、
処理を分ければOKでした。
サンプルコードはどうなる？
// xxx.vue // public: false, というプロパティを持っているとする // NG <checkbox v-model="public"></checkbox> // OK // v-bind:checkedで初期値設定、changeイベントでpublicを反転させてpublicプロパティへ代入 <checkbox v-bind:checked="public" @change="public = !public"></checkbox>
下記issueのjsfiddleがわかりやすいです。
I think this should be re-opened, the issue is still present and is actually not releated to jQuery, which was the argument given for closing this. Vue not being able to react as expected to externally invoked events is especially problematic when we are talking about things like Selenium-driven regression testing, but it also affects cross-app interaction for Vue-based Widgets and many other things. Check out this fiddle to see the problem in action: https://jsfiddle.net/Sigma90/f9j5a8ny/ The first checkbox uses "v-bind:checked" and "v-on:change", the second one uses "v-model", which is supposed to be a shortcut for those two. Calling "dispatchEvent(new Event('change'))" on the first one changes the data as expected, but the same operation on the second one does nothing, despite the fact that the documentation and the previous commenter both state that the change event should work.
Vueが外部から呼び出されたイベントに期待どおりに反応できないことは、Selenium駆動の回帰テストなどについて話しているときに特に問題になりますが、Vueベースのウィジェットやその他の多くのアプリ間の相互作用にも影響します。 このフィドルをチェックして、実際の問題を確認してください：https： //jsfiddle.net/Sigma90/f9j5a8ny/ 最初のチェックボックスは「v-bind：checked」と「v-on：change」を使用し、2番目のチェックボックスは「v-model」を使用します。これはこれら2つのショートカットになるはずです。最初の1つで「dispatchEvent（newEvent（ 'change'））」を呼び出すと、期待どおりにデータが変更されますが、ドキュメントと前のコメントの両方で変更イベントが示されているにもかかわらず、2番目の同じ操作では何も行われません。
よくある質問
- Vue 3でv-modelの挙動は改善された？
- Vue 3ではv-modelがコンポーネントへ複数バインドできるようになりAPIは拡張されましたが、外部イベント(dispatchEvent経由)への反応性は同様にv-bind:checkedと@changeの分離が必要な状況も残ります。
- @inputイベントでも代用できる？
- checkboxでは@changeが標準ですが、@inputでも値変更を検知できます。ただしIE互換性やfireタイミングが異なるため、checkboxでは@changeが無難です。
- Selenium以外の自動テストでも同じ問題が起きる？
- dispatchEventやjQuery#trigger等で「外部からchangeを発火する」仕組みはCypressやPlaywrightでも同様の挙動が報告されており、vue/issues/2804で議論されています。
