引言

今天來好好當個切版仔
切一個喜歡的書單卡片版型
並利用之前學會的功能
那就讓我們開始吧～

用一點之前寫好的方法

首先我們先建立一個卡片清單的元件CardList.vue
引入之前幫好的方法getBookPages

import { collection } from 'firebase/firestore'
import { useCollection } from 'vuefire'
import { useFirestore } from 'vuefire'
import { deleteBookInfo, getBookPages} from '../firebase';

template

<template>
  <div>
    <div border-1 border-solid border-gray-300 p-16 m-16 text-center v-for="book in books" :key="book.id">
      <img max-w-90 max-h-100 w-auto h-auto :src="book.coverImagePath" alt="書籍封面" />
      <h2>{{ book.bookTitle }}</h2>
      <p>作者: {{ book.author }}</p>
      <p>出版社: {{ book.publisher }}</p>
      <p>出版日期: {{ book.publicationDate }}</p>
    </div>
  </div>
</template>

是不是很簡單呢
好了基本款的功能大致上都發完了
接下來我們也要用這些已知道的方法來實踐其他功能
並且優化我們的東西....
好像真的可以買書了來用了
謝謝大家看到這裡^^