Vue.js インスタンスプロパティの変更を監視する

個人開発したアプリの宣伝

目的地が設定できる手帳のような使い心地のTODOアプリを公開しています。

Yoshiko Ichikawa
Productivity
Free

スポンサードリンク

こういったVueオブジェクトが定義されていた場合、arrayListに何らかの操作が行われた時に発火するメソッドを定義できる。

var app1 = new Vue({
  el: '#app1',
  data: {
    arrayList: []
  }
});

watch メンバの定義

watchメンバの中に監視するプロパティとchange時の処理をオブジェクトとして記述する。

var app1 = new Vue({
  el: '#app1',
  data: {
    arrayList: []
  },
  watch: {
    arrayList: function(){
      //do change action
    }
  }
});

但し、この場合、仮にarrayListの中にオブジェクトが配置されていた時などはオブジェクトの変更まではwatchできない。arrayList内に配置されたオブジェクトなどまで変更されたかをwatchした場合はhandlerにコールバックを定義し、deep: trueを指定する。

var app1 = new Vue({
  el: '#app1',
  data: {
    arrayList: []
  },
  watch: {
    arrayList:{
      handler : function(){
        //do change action
      },
      deep: true
    }
  }
});

リンク