Pnei Kedem Book Club

Online book club

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="https://unpkg.com/vue"></script>

<div id="app" class="container-fluid">
  <h1>{{ title }}</h1>

  
  <div class="row">
  <div v-if="books.length==0" class="text-center">No Books Yet</div>
    <book-item :book="b" v-for="b in books">
    </book-item>
  </div>  

</div>

JavaScript

Vue.component('book-item', {
  props: ['book'],
  template: `
  <div class="col-xs-4 text-center">
      <a href="#" class="thumbnail">
        <img v-bind:src="book.img" style="height:226px" >
        <span>{{ book.title }}</span>
      </a>
  </div>
  `
});
new Vue({
  el: '#app',
  data: {
    title: 'Pnei Kedem Book Club',
    books: []
  },
  mounted() {
    fetch("https://api.mlab.com/api/1/databases/trempi/collections/books?apiKey=biHOKMqy0Y_nmy85WFmVyFabzLeYSP78").then(response =>response.json())
    .then(response => {
        this.books = response;
     })
   }
})