こんにちは、”はふぃ”です。

Vue.jsのwatchと言えばその名の通り対象のデータを監視するために使うものですが、色々便利な使い方があることを知ったので自身の備忘録も兼ねて書きます。

色々な使い方

基本

watch: {
  data (newVal, oldVal) {
    console.log(`更新前のデータ:${oldVal}`)
    console.log(`更新後のデータ:${newVal}`)
  }
}

ネストしたデータの監視

Objectなどでネストした値を監視する場合にはdeep: trueを利用する

< 間違った例 >

data () {
  return {
    data: {
      nestedData: '今回のターゲット'
    }
  }
},
watch: {
  data: {
    nestedData (newVal, oldVal) {
      console.log(`更新前のネストされたデータ:${oldVal}`)
      console.log(`更新後のネストされたデータ:${newVal}`)
    }
  }
}

< 正しい例 >

data () {
  return {
    data: {
      nestedData: '今回のターゲット'
    }
  }
},
watch: {
  data: {
    handler (newVal, oldVal) {
      console.log(`更新前のネストされたデータ:${oldVal.nestedData}`)
      console.log(`更新後のネストされたデータ:${newVal.nestedData}`)
    },
    deep: true
  }
}

画面遷移の検出

Vue-routerを使った画面遷移はlocation.hrefなどとは少し異なるため、Vue-routerでの画面遷移を検出したいことがあると思います。そのような場合は以下のようにします。

watch: {
  '$route': function (to, from) {
    console.log(`画面遷移前のpath:${from}`)
    console.log(`画面遷移後のpath:${to}`)
  }
}

アンカーリンク

アンカーリンクとは、リンクしたい場所にアンカー(目印)を置いてページ内ジャンプをするための機能。htmlでは飛び先の要素にid=”アンカー名”、リンクにhref=”#アンカー名”を設定することで実装できる

Vueでは上記では正しく動作しないので、watchを利用して以下のように実装します。

watch: {
  '$route': function (val) {
    if (val.hash.match(/^#/)) {
      document.getElementById(val.hash.replace(/^#/, '')).scrollIntoView()
    }
  }
}

投稿者: はふぃ

若手のWEBフロントエンジニア。最近はバレーボールにハマってます!

コメントを残す

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

CAPTCHA