Vue

Watch Complex Structure

by Ben Clayton

HTML

<div id="demo">
  <button @click="change1">change1</button>
  <button @click="change2">change2</button>
  <pre>{{ $data | json }}</pre>
</div>

JavaScript

new Vue({
	el: '#demo',
  data: {
  	things: [{foo:1}, {foo:2}]
  },
  watch: {
  	things: {
      handler: function (val, oldVal) {
      	alert('a thing changed')
      },
      deep: false // set to true to make Vue detect change in value of foo, otherwise it will only see thing array length change 
    }
  },
  methods: {
  	change1: function () {
	    this.things[0].foo = 5;
    },
    change2: function () {
	    this.things.push({foo:9});
    }
  }
})