<template>
  <div class="book-list">
    <template v-for="(item, key) in items" :key="key">
      <book-card :item="item" @on-click="onClick(item)"></book-card>
    </template>
  </div>
</template>

<script setup>
import BookCard from '@/components/BookCard/index.vue'
import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import axios from '@/utils/axios';
import $ from 'jquery'
import { Toast } from 'vant';
const $route = useRoute();
const $router = useRouter();

const items = reactive([])

  onMounted(() => {
    for (let index = 0; index < 20; index++) {
      items.push({
        id: index,
        avatar: 'https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg'
      })
    }
  })
</script>

<script>
import mixin from 'common/mixin';

export default {
  mixins: [mixin.init],
  data () {
    return {

    }
  },
  mounted () {

  },
  methods: {

  }
}
</script>

<style lang="less" scoped>

</style>