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

で消しただけ.

スクリーンショット

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

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

参考にしたサイト

  1. 公式 - リアクティブの探求
  2. てっく煮ブログ

次回

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

シリーズ