【Vue.js】配列の特定のインデックスの値を書き換える

Vueでリアクティブにならない時

VueのdataやVuexでは以下のようなインデックス数値を使った配列要素の更新を検知してくれない。

let list = [
  { name: 'hoge' },
  { name: 'fuga' }
]

list[0] = { name: 'hogehoge' }

解決方法① Vue.setを使う

グローバルAPIのsetメソッドを使うと配列を更新することが出来る。

let list = [
  { name: 'hoge' },
  { name: 'fuga' }
]

// Vue.set(更新する配列, 配列のインデックス, 新しいデータ)
Vue.set(list, 0, { name: 'hogehoge' })

解決方法② spliceを使う

let list = [
  { name: 'hoge' },
  { name: 'fuga' }
]

list.splice(0, 1, { name: 'hogehoge' })

spliceはの第一引数は配列のインデックス、第二引数はインデックスから数えて何個要素を取り除くのかを指定、第三引数で挿入する値を指定する。
上記の例では、listの1番目の要素から1つを取り除き、{ name: 'hogehoge' }を挿入している。

spliceを使えば追加、削除、挿入全てができるのでspliceを使うのが良さげ。