スリ飯屋Malankaのフリーエンジニアな日々

IT実務未経験から約1年、東京でフリーランスのRuby on Railsエンジニアに転職。約2年半、大阪中崎町でスリランカカレーの間借りしてました。フリーランスエンジニアになるためのノウハウ、スリランカの事を発信していきます。

【Vue.js】v-modelでcheckboxの値の変更が反映されない

【Vue.js】v-modelでcheckboxの値の変更が反映されない




今すぐ登録したい方へ


このブログから登録の多いエージェントは下記の3つです★

(リンクをクリックすると公式サイトに飛びます)

【ダントツの1位】フォスターフリーランス【案件保有数5000件以上。業界25年の超老舗】

【僅差で2位】エミリーエンジニア【4人に1人が初めてのフリーランス】

【惜しくも3位】レバテックフリーランス【業界最大手。素早く手厚いフォローで案件参画】




こんにちは、mahです。


このブログでは、

僕が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がわかりやすいです。


github.com

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.jsVue.jsTypeScriptはUdemyの下記コースで学習しました。


フロントエンドエンジニアのための React ・ Redux アプリケーション開発入門

Vue.js + Firebaseで作るシングルページアプリケーション

ハンズオンで学ぶ TypeScript - JavaScript エンジニアのための TypeScript徹底入門


f:id:mah666hhh:20200815162919p:plain


f:id:mah666hhh:20200815162939p:plain


f:id:mah666hhh:20200815162951p:plain




最後に


下記の表に、

フリーランスエンジニア向けの人気エージェントをまとめてみました。


エージェント選びで悩んでいる方は是非参考にしてみてくださいね★





あわせて読みたい


www.malanka.tech


www.malanka.tech


www.malanka.tech


www.malanka.tech


www.malanka.tech


www.malanka.tech




最後までお読み頂きありがとうございました★

もしよかったらTwiiterのフォローもお願いします★