Vueで連想配列を変更してDOMを更新する方法

auです。

連想配列を更新する際に少し詰まってしまったので、メモ程度に残しておこうと思います。

連想配列とは

連想配列とは、以下のような形のものです。今回はVueで使う形を想定して書いています。

menu = {id: 0, text: hogehoge}

今回使った形は、以下のようなものでした。配列の中に連想配列がある感じ。

menu: [
  {id: 0, text: hogehoge},
  {id: 1, text: fugafuga}
]

配列は普通に代入するやり方だと、DOMが更新されません。(console.logで中身をみると変わっているけど)

this.menu[0].id = 1 // idを1に変更

しかし、配列の中の連想配列ならしっかりと表示が変わりました。

this.menu[0].id--

配列の値の更新とはちょっと違うみたいですね。DOMの理解が何となくできてきた気がします。