Vue watch, Watcher での状態監視処理の使い方。

watch とは

監視メソッド。値をとって、それが変化する時に処理を走らせることができる。

    data: () => ({
      message: 'How is you job status?',
      jobStatus: 'your status is ...',
      jobItems: ['never change', 'changing', 'changed recently'],
    }),
    watch: {
      jobStatus: function(newValue){
        console.log(newValue);
        if (newValue === 'changing') {
          this.message = 'Good Luck for the Job Interview!'         
        }
      }
    }

このように、初期の変数を入れる data に

メッセージの初期値、仕事の状態の初期値、仕事状況の選択肢、

を入れてセットする

また、監視メソッドでは watch に

監視する変数の対象と、それが変化した場合処理を書く。

引数の newValue では監視している対象 jobStatus の変化した後の値が入ることになる。

この jobStatus は次のコードで変化させる

<v-select
  v-model="jobStatus"
  :items="jobItems"
  label="job status"
></v-select>

v-model によって 選択肢である jobItems がクリックされて中身が変わると、

それが 読み取られて jobStatus に入る。

それがさっきの watch によって監視され、jobStatus に入った選択肢の値が

newValue として処理をされ、

コンソールに出力され、

それが changing 、転職中 だった場合は 転職面接頑張ってね！

ってメッセージが出る構成になっている。

スクショ

初期値

never change を選んだ場合

changing を選んだ場合

まとめ

data にメッセージ、状態、選択肢を定義して

v-model で選択肢動かすと状態に入るようにして

watch で 状態に入った選択肢を検知して、それに応じた処理を出すことができる！