なぜ、リアクティブを保つ必要があるのか？
Vue.jsといえば、プロパティ（data）の変化に応じて、UIも自動に変化させてくれるリアクティブ機能が目玉です。
しかし、ちょっとしたことで、リアクティブ性が失われ、「Dataは変わってるのに、画面に反映されない（涙」ということになります。Vue.js案件のあるあるだと思います。
リアクティブ性を保つ、またはリアクティブ性を失わないためにも、この記事で挙げることを守りましょう。
data で全プロパティを宣言しておく
data:function(){
return {
hoge: {}
}
}
ではなく、
data:function(){
return {
hoge: {
elmA: null,
elmB: [],
}
}
}
このように、入れ子の項目もちゃんと宣言しておきます。
入れ子のdata項目は項目ごとに入れ替える
初期データを取得したときに
this.hoge = response.hoge;
と丸っとやりたいところですが、
this.hoge.elmA = reponse.hoge.elmA
this.hoge.elmB = reponse.hoge.elmB
と1つずつセットしていきましょう。
配列の初期化／変更はsplice(0)、追加はpush
配列項目は要注意です。扱いを統一しておかないと、すぐにリアクティブじゃなくなります。
メソッドの中で、
this.arrayA = []
こういうことをしたい事はよくありますが、すぐにリアクティブが失われるので、
this.arrayA.splice(0);
と書きましょう。初期化、変更は必ずspliceを使うように統一してください。
要素の追加は、pushです。
入れ子dataを使わなくていいようにコンポーネントを分割していく
入れ子の項目でも、リアクティブ性を保つことはできるのですが、なぜ？入れ子にする必要があるかと言うと、コンポーネント化されていないからです。
data:function(){
return {
hoge: {
elmA: null,
elmB: [],
}
}
}
このようなdata定義が必要なら、hogeコンポーネントを作るべきです。
そうすると、hogeコンポーネントのdataは、
data:function(){
return {
elmA: null,
elmB: [],
}
}
このように書けるはずです。リアクティブ性を保ちやすく、シンプルな構造になります。