Edited at

Vue.jsでSPA - [5] リアクティブになってる?

前回の続き

前回みたエラーメッセージでMake sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.というのがあり,ちょっと気になったので,今回はdataがリアクティブになってるかどうかを確認してみる回


リアクティブ?

公式のこのあたり読む.Vueのインスタンスのdataのオブジェクトの中にあるプロパティはリアクティブのはず.

ちなみに公式にあるObject.observe の断念という記載が気になって調べて見た.てっく煮ブログが詳しく,面白く読ませていただいた.さすが動きの早いフロント界隈,いろいろある.


やってみる

要は,dataいじるとDOMが連動して変わるってことみたいなので,やってみる.といってもデベロッパーツールからdataオブジェクトに値いれたり,消したりしてみるだけやけど.

簡単のため,コンポーネント化してない,第二回の時のコードで試してみる.

vm.location.push({'id':4, 'name':'Site4', 'country':'Japan', 'metro':'Tokyo'})

で値追加して

vm.location.pop()

で消しただけ.


スクリーンショット

リアクティブ感を貼っときます.

Image from Gyazo

今日はこんだけ.ほとんど進んでないが,続けることに意味があるということで.


参考にしたサイト


  1. 公式 - リアクティブの探求


  2. てっく煮ブログ


次回

次こそ,コンポーネントのところを別ファイルにする.そして,テーブルのデータをサーバから取得する.


シリーズ