7/7/17

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

Getting started with docker

It is very simple to get started usig docker. All you need to do-is download the docker desktop for your system Once you get docker syste...