Vue Data Passing Test

by mgoetzke

HTML

<script src="https://unpkg.com/vue"></script>
<div id="app">
  Hallo {{name}}
  
  --- 
  OBJ:
  <pre>{{obj}}</pre>
  
  Later OBJ:
  <pre>{{laterObj}}</pre>
  
  <button @click="obj.data.a++">Inc A</button>
   <button @click="laterObj.data.a++">Inc Later A</button>
   

   
      <button @click="buildLater">Build Later</button>
      
  <h3>Child with Obj</h3>
  <child :obj="obj"></child>

  <h3>Child with Later Obj</h3>
  <child :obj="laterObj"></child>
</div>

JavaScript

const Child = {
	props: ['obj'],
	template: '<div>CHILD <pre>{{obj}}</pre><button @click="dec">dec</button></div>',
  methods: {
  	dec() {
    	this.obj.data.a --
    }
  }
}

new Vue({
	el: '#app',
  data() {
  	return {
    	name: 'Test',
      obj: { 
      	data: {
        	a: 1
        }
      },
			laterObj: null      
    }
  },
  created() {
  	this.obj.a = 3
    
  },
  methods: {
  	buildLater() {
    	setTimeout(() => {
	    	this.laterObj = { data: { a: 100 }, later: true }
      },10)
      //const laterObj = { a: 100, later: true }
      //Vue.set(this, 'laterObj', laterObj )
    }
  },
  components: {
  	child: Child
  }
})