配列の操作

参考:

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 [公式]

タグ:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です