<div id="app">
<input v-model="search" type="search">
<input type="button" @click="doSearch" value="Search">
<br clear="left">
<div v-if="searching"><i>Searching...</i></div>
<div class="allResults">
<div v-if="books.length" >
<h2>Results</h2>
<p><i>Click the cover to find similar books...</i></p>
<div v-for="book in books" class="bookResult">
<img :src="book.image_url" class="bookResult" @click="findSimilar(book)">
{{book.title}}
</div>
</div>
<div v-if="relatedBooks.length">
<h2>Books Related to {{ selectedBook.title }}</h2>
<div v-for="book in relatedBooks" class="bookResult">
<img :src="book.image_url" class="bookResult">
{{book.title}}
</div>
</div>
</div>
</div>
div.bookResult {
clear: left;
}
img.bookResult {
float: left;
margin-right: 5px;
margin-bottom: 10px;
cursor:pointer;
}
.allResults {
display: grid;
grid-template-columns: 50.0% 50.0%;
}
const app = new Vue({
el:'#app',
data:{
search:'',
books:[],
relatedBooks:[],
searching:false,
selectedBook:null
},
methods:{
doSearch() {
if(this.search === '') return;
this.searching = true;
this.books = [];
this.relatedBooks = [];
console.log('search for '+this.search);
fetch(`https://openwhisk.ng.bluemix.net/api/v1/web/rcamden%40us.ibm.com_My%20Space/goodreads/search.json?search=${encodeURIComponent(this.search)}`)
.then(res=>res.json())
.then(res => {
this.searching = false;
this.books = res.result;
});
},
findSimilar(book) {
this.selectedBook = book;
this.relatedBooks = [];
console.log('find books similar to '+book.id);
fetch(`https://openwhisk.ng.bluemix.net/api/v1/web/rcamden%40us.ibm.com_My%20Space/goodreads/findSimilar.json?id=${encodeURIComponent(book.id)}`)
.then(res=>res.json())
.then(res => {
this.relatedBooks = res.result;
});
}
}
})
Also see: Tab Triggers