Vue.jsでプロパティを更新する際の注意点 備忘録

最終更新日:2020年2月26日 Vue.js

標記の件でハマったわけではないが、大事なことだし、今後忘れて失敗しそうなので軽くまとめておく。

まず、Vue.jsはプロパティそのものの追加や削除を検知できない。

そのため、dataで定義したリアクティブなオブジェクトに対して、後から新たなプロパティを追加してもページには反映されない。(consoleで表示させると、正しく追加できているように見えるので注意)

これを避けるには、以下の2つの方法がある。

1.あらかじめリアクティブオブジェクトのプロパティを設定しておく。

2.Vue.setメソッドを使って、Vue.jsにプロパティの追加を通知する。

例えば、以下の場合はoptions.titleオブジェクトのtextプロパティは、最初から用意されているので、Vue.setを使わなくても直接値を代入すればリアクティブに反映される。

もちろん、Vue.setを使ってもOK。

参考書籍:これからはじめるVue.js実践入門(P40参照)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です