こんにちは、現役沖縄フリーランスエンジニアのmah（MaLanka）です。
このブログでは、
僕がIT未経験から約1年でフリーランスエンジニアになるまでの過程、
ノウハウなどを書いていきます。
今回は、
- 【Vue.js
】v-modelでcheckboxの値の変更が反映されない
について書いていきます。
【Vue.js】v-modelでcheckboxの値の変更が反映されない
フォームの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.jsやフロントエンドを学習したい方へ
自分の場合、
React.js
、Vue.js、TypeScript
はUdemyの下記コースで学習しました。
✅フロントエンドエンジニアのための React ・ Redux アプリケーション開発入門
最後に
下記の表に、
フリーランスエンジニア向けの人気エージェントをまとめてみました。
エージェント選びで悩んでいる方は是非参考にしてみてくださいね★
| エージェント | 詳細 | 最高単価/月 | 設立 |
|---|---|---|---|
|
|
評判をチェック | 180万円/月 | 2011年 |
ギークスジョブ
|
評判をチェック
|
180万円/月 | 2011年 |
フォスターフリーランス
|
評判をチェック | 230万円/月 | 1996年 |
| pe-bank(pebank) | 評判をチェック | 200万円/月 | 1989年 |
|
Midworks(ミッドワークス) |
評判をチェック | 200万円/月 | 2013年 |
|
|
評判をチェック | 140万円/月 | 2005年 |
あわせて読みたい
