I’m creating a bookstore app with Vue.js. The books are in this API https://api.myjson.com/bins/1h3vb3, but I can’t show them in my HTML with the following function and I don’t understand why:
JavaScript
x
9
1
<div id="list-books" v-if="books && books.length">
2
<div>Cover page: <strong>{{ books }}</strong></div>
3
<div>Details: <strong>{{ books.detalle }}</strong></div>
4
<div>Title: <strong>{{books.titulo}}</strong></div>
5
<div>Description: <strong >{{books.descripcion}}</strong></div>
6
<div>Language: <strong>{{books.idioma}}</strong></div>
7
</div>
8
<div class="text-center" v-else> No results! </div>
9
JavaScript
1
22
22
1
new Vue({
2
el: "#vue-app",
3
data() {
4
return {
5
title: "Ubiqum Bookstore",
6
books: []
7
};
8
},
9
methods: {
10
getAPI() {
11
axios
12
.get("https://api.myjson.com/bins/1h3vb3")
13
.then(response => {
14
this.books = response;
15
})
16
.catch(e => {
17
console.log("No found!");
18
});
19
}
20
}
21
});
22
Advertisement
Answer
axios.get
resolves to a Response
, which stores the received data in the data
property. In your code, you’ve incorrectly set this.books
to response
, which is the entire Response
object. You should instead reference response.data.books
:
JavaScript
1
2
1
axios.get( ).then(response => this.books = response.data.books)
2
Also, to render a list of items, use v-for="book in books"
like this:
JavaScript
1
7
1
<div v-for="book in books">
2
<div>Details: <strong>{{ book.detalle }}</strong></div>
3
<div>Title: <strong>{{ book.titulo }}</strong></div>
4
<div>Description: <strong >{{ book.descripcion }}</strong></div>
5
<div>Language: <strong>{{ book.idioma }}</strong></div>
6
</div>
7
JavaScript
1
21
21
1
new Vue({
2
el: '#vue-app',
3
data() {
4
return {
5
title: "Ubiqum Bookstore",
6
books: []
7
};
8
},
9
methods: {
10
getAPI() {
11
axios
12
.get("https://api.myjson.com/bins/1h3vb3")
13
.then(response => {
14
this.books = response.data.books;
15
})
16
.catch(e => {
17
console.log("No found!");
18
});
19
}
20
}
21
})
JavaScript
1
3
1
.book {
2
margin: 1rem;
3
}
JavaScript
1
14
14
1
<script src="https://unpkg.com/vue@2.6.11/dist/vue.min.js"></script>
2
<script src="https://unpkg.com/axios@0.19.2/dist/axios.min.js"></script>
3
4
<div id="vue-app">
5
<button @click="getAPI">Get data from API</button>
6
<div id="list-books" class="book" v-if="books" v-for="book in books">
7
<!-- <div>Cover page: <strong>{{ books }}</strong></div> -->
8
<div>Details: <strong>{{ book.detalle }}</strong></div>
9
<div>Title: <strong>{{book.titulo}}</strong></div>
10
<div>Description: <strong >{{book.descripcion}}</strong></div>
11
<div>Language: <strong>{{book.idioma}}</strong></div>
12
</div>
13
<div class="text-center" v-else> No results! </div>
14
</div>