Vue Routes (Part 5)

Old School

In previous part we make a form component for "insert a new book" functionality. Since this component should be shown only when somebody wants to add a new book and pressed "Add New Book" button - we hide using v-if directive:

  <div class="row" v-if="showForm">
    <book-form v-on:book-added="onBookAdded"></book-form>
  </div>

Routing

There is a different (and more accurate) way to manage components in the application: instead of placing them straight into the markup you can load them using routes.
All you need to do for use routes is:
1. put into your code a reference to vue-router.js lib.
2. place router-view directive in place where you want your components to be loaded:

  <router-link to="/">/home</router-link>
  <router-link to="/form">/Add New Book</router-link>
  <router-view></router-view>

3. add router property to configuration of your main component:

const Home = { template: '
' }

const router = new VueRouter({ 
  mode: 'history',
  routes: [
    { path: '/', component: Home },
    { path: '/form', component: formComponent }
  ]
})
new Vue({
  el: '#app',
  router,
  data: {
    title: 'Pnei Kedem Book Club',
    books: [],
    loading:false,
    showForm:false
  },
....
....

Well currently our form cannot add a new book, but we will fix it in the next part.
Look here for running code

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

Loading Data From Api Vue - Part 3 (fetch)

In previous post we created the "Book Club" app home page which displays list of most popular books.
Of course all books came currently from static variable.
Now instead of display static data lets try to display data from api.

Fetch

Changes are very slight: In the "data" section we need to define books as empty array instead of static data:

new Vue({
  el: '#app',
  data: {
    title: 'Pnei Kedem Book Club',
    books: [] //<--empty
  }
})

Next step is to add "get" call to API inside "mounted" method:

new Vue({
  el: '#app',
  data: {
    title: 'Pnei Kedem Book Club',
    books: []
  },
  mounted() {
    fetch("//api.mlab.com/api/1/databases/mydb/collections/books?apiKey=myKey")
    .then(response =>response.json())
    .then(response => {
        this.books = response;
     })
   }
})

As you can see - the change is very slight...(no services, no dependency injections needed)
For running code see this jsfiddle