【Nuxt.js/Vue.js v2】Vueが検知できる変更

変数

まず当たり前ですが、変数に直接的な変更があった場合は検知可能です。
変数に値が代入されるたび、自動で画面の表示内容に反映されます。

<p>{{ hoge }}</p>

this.hoge = 'hoge'

配列

検知できない方法

配列の要素の変更は検知できません。例えば以下のように、添字で指定して代入する方法では画面が更新されません。

<p>{{ hoge }}</p>

this.hoge[0] = 'hoge'

検知できる方法

Vueが提供しているthis.$set()を使用して、配列の要素に代入すれば検知可能になります。

// 引数: 変更対象の配列, インデックス, 代入する値
this.$set(this.hoge, 0, 'hoge')

また、以下の配列の変更メソッドでの更新も検知可能です。
push()
pop()
shift()
unshift()
splice()
sort()
reverse()

this.hoge.push('hoge')

オブジェクト

検知できない方法

プロパティの追加は検知できません。例えば以下のように、dataオブジェクト上で定義されていないプロパティへの代入は画面に反映されません。

<p>{{ hoge }}</p>

data () {
  return {
    hoge: {}
  }
}

this.hoge.name = 'taro'

検知できる方法

配列同様、this.$set()を使用してプロパティを追加すれば検知可能になります。

// 引数: 変更対象の配列, key値, 代入する値
this.$set(this.hoge, 'name', 'taro')

また、dataオブジェクト上で宣言済みのプロパティであれば通常の代入でも変更が検知されます。

data () {
  return {
    hoge: { name: null }
  }
}

this.hoge.name = 'taro'