Emit and listen in Vue 2

by Alex Carlsen

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<div id="user-example">
  <p> {{user.fullname}} </p>
  <usercomp v-bind:user="user"></usercomp>
</div>

JavaScript

Vue.component('usercomp', {
  template: '<input v-model="user.name.lastname">',
  props:['user'],
  computed: {
  	fullname: function() {
    	return this.user.firstname + ' ' + this.user.lastname;
    }
  }
});

new Vue({
  el: '#user-example',
  data: function() {
  	return {
    	user: {
      	name: {
        	fullname: '',
        	firstname: '',
          lastname: '',
        }
      }
    }
  }
})