【Vue】wacthの使い方を解説!wacthを使ってURLの変更を検知

プログラミング

Vue wacthとは?

watchは特定のデータや算出プロパティの変化を監視して、変化があったときに登録した処理を実行するプロパティです。

  • URLの変更
  • フォームの項目変更

値が変わったときに、クラスを付与したり、表示非表示の切り替えを行いたいときはwatchプロパティを使います。

環境とバージョンについて

Vue watchの使い方

基本的な使い方は下記のとおりです。

watch: {
	監視するデータ: function(新しい値, 古い値) {
	  // データが変化した時に行いたい処理
	}
},

questionの値が変わるごとに実行するwatchの関数

data: {
  question: '',
  answer: 'I cannot give you an answer until you ask a question!'
},
watch: {
  // この関数は question が変わるごとに実行されます。
  question: function (newQuestion, oldQuestion) {
    this.answer = 'Waiting for you to stop typing...'
    this.debouncedGetAnswer()
  }
},

v-modelを使って、questionの値を変えたときには、question: function・・・が実行されます。

vue watchでURLの変更を検知

URLの変更を検知したいときは、$routeを使うことで検知することができます。

watch: {
    $route(to) {
      this.url = to.path
	    this.checkUrl(this.url)
    },
},

上記では現在のURLが変更されたときに、遷移先のURLをthis.urlに追加したあとにthis.checkUrlの関数に現在のURLを渡します。

関数に現在のURLを渡すことで、URLごとに挙動を変えることができます。

まとめ

  • 第1引数に監視したい変数を入れて、第2引数に行いたい処理を関数で書きます。
  • URLの変更を検知したい場合は、$routeを使う

おすすめの参考書

プログラミング
スポンサーリンク
スポンサーリンク
e-logsをフォローする
スポンサーリンク
eLogs

コメント

タイトルとURLをコピーしました