More than 3 years have passed since last update.

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

Last updated at 2020-04-05Posted at 2018-07-28

前回の続き

前回みたエラーメッセージで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()

で消しただけ．

スクリーンショット

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

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

参考にしたサイト

次回

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

シリーズ

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up