配列の操作 [Vue.js]

配列の操作

参考：

Vue.js は気難しい 配列編 – Qiita

よくある初心者の落とし穴 | Vue.js [公式]

配列の変化を検出 | Vue.js [公式]

配列の変更

配列の変更が検出されるメソッド

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

参考：

変更メソッド | Vue.js [公式]

変更が検出できない操作

インデックスを指定して代入する。

vm.items[indexOfItem] = newValue

配列の長さを指定する。

vm.items.length = newLength

参考：

注意事項 | Vue.js [公式]

配列全体を置き換える

filter 関数を使って変更した配列で、配列全体を置き換える。

this.items = this.items.filter((item) => {
  return item.message.match(/Foo/)
})

map 関数を使って作成した配列で、配列全体を置き換える。

this.messages = this.items.map((item) => {
  return `${item.name}: ${item.message}`
})

参考：

配列の置き換え | Vue.js [公式]

連想配列 (オブジェクト)

参考：

Vue.js で連想配列を動的に変更させるときの注意点 – Qiita

オブジェクトの変更検出の注意 | Vue.js [公式]