Vue.jsで配列を更新しても表示が変わらない時に確認する3つの事

先日、Vueで管理している配列を編集してもVueの表示が変わらず、困ったことがあったので、その時の対策を書いていきたいと思います。

1. pushやspliceなどのVueでwrapされた変更メソッドを使っているか

Vueでは、管理しているdata内の配列にpushやspliceを行うと画面の更新もトリガーされ表示を自動で切り替えてくれます。

https://jp.vuejs.org/v2/guide/list.html#配列の変化を検出

2. Array[“key”] = value のように値を直接書き換えていないか

var vm = new Vue({
  data: {
    a: 1
  }
})
// `vm.a` は今リアクティブです

vm.b = 2
// `vm.b` はリアクティブでは"ありません"

Vue では、すでに作成されたインスタンスに対して新しいルートレベルのリアクティブなプロパティを動的に追加することはできません。

https://jp.vuejs.org/v2/guide/reactivity.html#変更検出の注意事項

引用の通り、動的にdataの直下に b を追加することは出来ません。
仮に b という変数を使いたい場合は、あらかじめ data の中に定義しておく必要があります。

data内にあるオブジェクトに関して、明示的にプロパティが追加されます

var vm = new Vue({
  data: {
    associate: {
      b: 2, 
    },
    array: [
      0: 2, 
    ],
  }
})

Vue.$set(vm.associate, "b", 2)
Vue.$set(vm.array, 0, 2)

associate["b"] = 2
array[0] = 2

のように直接特定のインデックスの値をセットしたい時に使います。

3. 配列を定義している階層はあっているか

普通に検索すれば1.2.しか出ないと思います。
初心者の私はここでやらかしました。
蓋を開けてみれば電化製品にコンセントが差さっているかってレベルでした。

自分の場合、そもそも最初の設計がダメで、dataの中に更にdataをkeyとして配列を作ってしまっていました。
そして、$setの使い方を勘違いし、vm.data.hoge という連想配列が作られてしまっていました。これはひどい。

var vm = new Vue({
  data: {
    hoge: {} ← 本当はこっちが更新してほしい
    data: [
      "hoge": value ← data内のdataで更新されてしまう
    ]
  }
})

Vue.$set(vm.data, "hoge", value)  ← data内のdataに"hoge"をkeyとしてvalueが入る

そんなことも全く気付かず、

<p v-for="velue in hoge"> ← 更新されてないから変わるわけがない
  @{{ velue }} 
</p>

で更新されない！と焦っていたわけです。恥ずかしい…

まとめ

・Vue公式ページに全てが載っている
・それでもおかしい場合は自分のコードがほぼ間違っている

では！