データの変更に対して、v-bindやv-ifが反応しない時の対処法

2017年12月1日

環境

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);

 

ちゃんと反応してくれます!

 

いかがでしょうか?

今日はこの辺でー

  • この記事を書いた人

カバノキ

印刷会社のWEB部隊に所属してます。 WEB制作に携わってから、もう時期10年になります。 普段の業務では、PHPをメインにサーバーサイドの言語を扱っています。 最近のお気に入りはJavascriptです。 Vue.jsを狂喜乱舞しながら、社内に布教中です。

-vue.js
-, , ,