⇨ Vue 記事の目次はこちら

Vue で親データが変わったのに、子 props が変わらないときに試すべきことについてまとめました

環境
Nuxt2.15.7

まず最初に

Vue は基本的にデータが変われば勝手に表示が切り替わる

それは、親コンポーネントから子コンポーネントへ props で渡しても同じことが言えます。

基本的に勝手に表示が変わってくれます。そこがありがたい点ですね。

勝手に表示が切り替わらないこともある

Vue は「データが変わった」を検知してその表示部分だけを切り替えてくれるようにしてくれています。

なので、「データが変わった」を検知できないパターンのときに表示部分が切り替わらないということが起きます。

どんなときに検知できないか？

例えば、連想配列の中のプロパティの一部を書き換えたようなときには検知できなさそうです。

this.posts[0].content = "変更変更変更"

こんな感じで書き換えたりしたら、もしかしたら子コンポーネントの props が書き変わらないかもしれません。

つまり、変更を伝える書き方、または再読み込みを促す方向で実装する

例えば、配列であれば破壊的変更の書き方じゃないとダメっぽいです。

push とか、splice とかだと変更が伝わります。

試して欲しいこと

これからやることは、

this.posts[0].content = "変更変更変更"

という変更を子コンポーネントに伝えるやり方についてやっていきます。

配列の変更を splice を使って実装する

data(){
  return {
    //元々あるデータ
    posts: [
      {id:1,content:'content1'},
      {id:2,content:'content2'},
    ],
    //変更したい新しいデータが↓だとする
    post: {
      {id:1,content:'変更変更変更'}
    }
  }
},
methods: {
  changeData: function(){
    //postが新しく変更されたデータとして
    //変更したい配列のindexを取得
    const index = this.posts.findIndex((x) => x.id === post.id);
    //indexから1番目をpostに変更
    this.posts.splice(index, 1, post);
  }
}

オブジェクトのプロパティ変更を$set を使って伝える

this.$set(this.post, "content", "変更変更変更")

PR

UXデザインの法則 ―最高のプロダクトとサービスを支える心理学

Jon Yablonski
￥1,980 (2024/09/16 13:00時点 Amazon調べ) 現在の値段の詳細はこちら

Amazon

参考

Vue 公式「リアクティブの探求」

だいたいここに書いてあります。

まとめ

以上、親データが変わったのに子の props が書き変わらないときに試すべきこと２つを紹介しました。

苦情、誤りに関する指摘は下の Twitter の DM から頂ければ幸いです。

それでは！