The dot of Vue-awesome-swiper doesn't appear?

<template>
    <div class="wrapper">
        <swiper :options="swiperOption">
        <!-- slides -->
            <swiper-slide>
                <img class="swiper-image" src="https://userimg.qunarzz.com/imgs/201605/15/66I5P2-jg3LCvIjm6480.jpg">
            </swiper-slide>
            <swiper-slide>
                <img class="swiper-image" src="https://userimg.qunarzz.com/imgs/201607/09/66I5P2-aFpm1ja7-6480.jpg">
            </swiper-slide>
            <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>
    </div>
</template>
<script>
export default {
    name:"HomeSwiper",
    data () {
        return {
            swiperOption:{
                pagination: {
                    el: ".swiper-pagination"
                }
            }
        }
    }
}
</script>
<style lang="stylus" scoped>
    .wrapper
        overflow: hidden
        width: 100%
        height: 0
        padding-bottom: 31.25% 
        background: -sharpeee
        .swiper-image
            width: 100%
</style>

clipboard.png

Jun.27,2021

<div class="swiper-pagination">
  <span v-for="index in total" :key="index">
  </span>
</div>
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b30a4f-2bd25.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b30a4f-2bd25.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?