Vue.js watchを使用してデータを監視するサンプルコード

Vue.js watchを使用してデータを監視するサンプルコード

vueのwatch機能を利用して、指定したデータとオブジェクト(今回は配列)を監視し処理を実行する基本的なサンプルコードになります。

環境

  • OS windows10 pro
  • エディタ VScode

サンプルコード

下記のソースコードをindex.htmlとして作成して保存する。

vue.jsは開発バージョンを利用してます
<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>

保存したファイルをブラウザで開いて確認。

「フラグを変更」ボタンをクリックすると変更前と変更後のフラグが表示される

オブジェクトを変更すると、変更後の値が確認できます。