Added proper error handling when loading books
This commit is contained in:
parent
e5d879f593
commit
0359eae183
|
@ -5,6 +5,15 @@
|
||||||
<icon name="refresh" spin></icon>
|
<icon name="refresh" spin></icon>
|
||||||
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
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue