vue

by fergal_doyle

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.10/vue.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

  <comp :model="model">

  </comp>

JavaScript

new Vue({
  el: 'body',
  data: {
		model: {
    	foo: 'abc',
      bar: [
      	'aaa',
        'bbb',
        'ccc',
        'ddd'
      ]
    }
  },
	components: {
  	comp : {
    	props: ['model'],
      template: '<div>{{model | json}} <button @click="update1">Update model 1</button> <button @click="update2">Update array</button></div>',
      ready: function () {
      	console.log('comp ready')
      	this.$watch('model.foo', function (value) {
        	console.log('foo changed', value)       
        }); 
       	this.$watch('model.bar', function (value) {
        	console.log('bar changed', value)       
        });         
      },
      methods: {
      	update1: function () {
        	$.extend(this.model, { bar: 'jaz' });
        },
      	update2: function () {
        	this.model.bar.push('another');
        }
      }
    }  
  }
});