39 lines
696 B
Vue
39 lines
696 B
Vue
<script setup>
|
|
import BookCard from './BookCard.vue';
|
|
import { getBooks } from './api.js'
|
|
|
|
const { data, error } = getBooks();
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="books">
|
|
|
|
<div v-if="error">Error when loading books: {{ error.message }}</div>
|
|
<div class="book" v-else-if="data" v-for="book in data" :key="book.id">
|
|
<BookCard v-bind="book" />
|
|
</div>
|
|
<div v-else>Loading...</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
.books {
|
|
position:relative;
|
|
float:left;
|
|
width:100%; height:auto;
|
|
padding-bottom: 100px;
|
|
line-height: 2.5;
|
|
|
|
column-count: 4;
|
|
column-gap: 15px;
|
|
}
|
|
|
|
#book {
|
|
width: 100% !important;
|
|
height: auto !important;
|
|
transition: ease-in-out 0.15s;
|
|
}
|
|
</style>
|