[NuxtJS]watch オプションを使用してデータが変更されたか監視する

NuxtJS には特定の変数の値を監視して値が変化したことを検知する watch オプションというものがデフォルトで提供されています。 watch オプションに監視対象の変数の名前と値が変化した時に処理する内容を実装します。古い値と新しい値を受け取ることができるのでデータの比較を行うこともできます。

前提条件
実装サンプル
1. Watch.vue
動作確認
watch に指定することができるオプション
最後に

前提条件

vue : 2.6.14
nuxt : 2.15.8

こちらから今回のソースコードを確認できます。

実装サンプル

Watch.vue

template タグの中は以下のように実装します。

<template>
  <v-card>
    <v-card-title>値を監視する</v-card-title>
    <v-card-text>
      <v-text-field v-model='watchData' label='監視対象データ' />
    </v-card-text>
    <v-card-text>
      <p>新しい値：{{ newWatchData }}</p>
      <p>古い値：{{ oldWatchData }}</p>
    </v-card-text>
    <v-card-title>オブジェクトの値も監視する</v-card-title>
    <v-card-text>
      <v-text-field v-model='arrayObj.value' label='監視対象データ' />
    </v-card-text>
  </v-card>
</template>

script 部分の実装は以下の通り。

export default {
  name: 'WatchPage',
  data() {
    return {
      watchData: '1',
      newWatchData: '',
      oldWatchData: '',
      arrayObj: { value: '10', },
      arrayNewWatchData: '',
      arrayOldWatchData: '',
    }
  },
  watch: {
    watchData(newValue, oldValue) {
      this.newWatchData = newValue
      this.oldWatchData = oldValue
    },
    // オブジェクトの要素も監視可能です
    arrayObj: {
      handler() {
        alert('変更を検知しました。変更された値：' + this.arrayObj.value)
      },
      deep: true
    },
  }
}