Add Book Form (Part 4)

Ok, we learned how to display some items list with Vue in previous steps.
Now it is time to learn about most common for all web apps thing - the form. Lets create an "add book" component:

/* book-form component */

Vue.component('book-form', {
  data(){
    return {
        title: ''
    }
  },
  methods: {
   submitForm: function (e) {
          e.preventDefault();
          this.$emit('book-added',{title:this.title})
        }
  },
  template: `
  <div class="container text-center">
      <form>        
        <div class="form-group">
            <label for="title" class="col-sm-2 control-label">title</label>
            <div class="col-xs-10">
                <input  class="form-control" v-model="title" id="title" placeholder="title">
            </div>
        </div>
        <button class="btn btn-primary" v-on:click="submitForm">Add</button>
      </form>
  </div>
  `
});

like in angular there is v-model directive in vue which tracking user input and producing it into javascript model
see the full code on this jsfiddler