Added proper error handling when loading books

This commit is contained in:
konrad 2017-11-10 12:27:52 +01:00 committed by kolaente
parent e5d879f593
commit 0359eae183
Signed by: konrad
GPG Key ID: F40E70337AB24C9B
1 changed files with 15 additions and 3 deletions

View File

@ -5,6 +5,15 @@
<icon name="refresh" spin></icon>&nbsp;&nbsp; <icon name="refresh" spin></icon>&nbsp;&nbsp;
Loading... Loading...
</div> </div>
<div class="ui negative message" v-if="error">
<div class="header">
An erro occured.
</div>
{{ error.message }}
<div v-if="error.response">
{{ error.response.Message }}
</div>
</div>
<div v-if="!loading"> <div v-if="!loading">
<form id="search"> <form id="search">
<div class="ui icon input"> <div class="ui icon input">
@ -58,7 +67,8 @@ export default {
searchQuery: '', searchQuery: '',
gridColumns: ['Title', 'ISBN', 'Year', 'Price', 'Author', 'Publisher', 'Status'], gridColumns: ['Title', 'ISBN', 'Year', 'Price', 'Author', 'Publisher', 'Status'],
loading: false, loading: false,
paginate: ['books'] paginate: ['books'],
error: ''
} }
}, },
created () { created () {
@ -89,6 +99,8 @@ export default {
.then(response => { .then(response => {
let bs = response.data let bs = response.data
let i = 0 let i = 0
// Loop throught the data we got from our API and prepare an array to display all books
for (const b in bs) { for (const b in bs) {
this.books[i] = { this.books[i] = {
Title: bs[b].Title, Title: bs[b].Title,
@ -113,8 +125,8 @@ export default {
this.loading = false this.loading = false
}) })
.catch(e => { .catch(e => {
this.loading = false console.log(e)
this.errors.push(e) this.error = e
}) })
} }
} }