LoginSignup
4
1

More than 3 years have passed since last update.

@narutaro

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

Last updated at Posted 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()

で消しただけ．

スクリーンショット

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

Image from Gyazo

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

参考にしたサイト

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

次回

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

シリーズ

4
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
4
1