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

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

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

前提条件

vue：2.6.14
nuxt：2.15.8

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

GitHub - koichi-ezato/nuxt-sample at watchオプション

Contribute to koichi-ezato/nuxt-sample development by creating an account on GitHub.

実装サンプル

Watch.vue

<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
    },
  }
}
</script>