目次
環境
vue.js: 2.5.6
はじめに
最近までdata オプションの変更にv-bindやv-ifが、なぜ反応しないのか分からなくて困っていました。
ようやく理由が分かったので、忘れないようにメモします。
リアクティブシステムの落とし穴
原因は、公式のドキュメンに乗っていました。
https://jp.vuejs.org/v2/guide/reactivity.html
モダンな JavaScript の制限(そして
Object.observeの断念)のため、Vue.js はプロパティの追加または削除を検出できません。
よって、dataオプションを変更する為に使用していた下記の記述では、JavaScriptの制限によって変更を追跡する事ができていなかったようです。
this.objct[index]['checkFlg'] = 1;
どうしたら良いか？
これも公式のドキュメントに記載されていました。
https://jp.vuejs.org/v2/guide/reactivity.html?#変更検出の注意事項
Vue はすでに作成されたインスタンスに対して動的に新しいルートレベルのリアクティブなプロパティを追加することはできません。しかしながら
Vue.set(object, key, value)メソッドを使うことで、ネストしたオブジェクトにリアクティブなプロパティを追加することができます
なるほど！ つまり、下記記述のようにすれば・・・
this.objct[index]['checkFlg'] = 1;
↓
this.$set(this.objct[index], 'checkFlg', 1);
ちゃんと反応してくれます！
いかがでしょうか？
今日はこの辺でー