element plus 轮播图第一页数据不显示问题

参考网址element-plus 使用 el-carousel 跑马灯默认第一页不显示_前端老实人的博客-CSDN博客_element plus 走马灯关键代码 ：在data里面定义一个初始化数据即可，里面要有长度

banner: [{}],

<template>
  <div class="content__wrap">
    <div class="swiper">
      <el-carousel height="420px">
        <el-carousel-item v-for="item in banner" :key="item.id">
          <img :src="item.img" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="recentUpdate"></div>
  </div>
</template>
<script>
import { reactive, toRefs, defineComponent, onBeforeMount } from "vue";
import { getBanner } from "@/api/tool.js";
export default defineComponent({
  name: "Index",
  components: {},
  methods: {},
  setup() {
    const state = reactive({
      banner: [{}],
    });
    onBeforeMount(() => {
      fetchData();
      console.log("...");
    });
    const fetchData = async () => {
      const data = await getBanner();
      state.banner = data;
    };
    return {
      ...toRefs(state),
      fetchData,
    };
  },
});
</script>
<style lang="scss" scoped>
.content__wrap {
  background: #ffffff;
  margin: 20px 20px 0 20px;
  padding: 40px 20px 40px 20px;
}
.title {
  font-size: 16px;
  color: #333333;
  font-weight: 600;
  padding-bottom: 16px;
}
.swiper {
  max-width: 1028px;
  img {
    width: 100%;
    height: 100%;
  }
}
.demonstration {
  color: var(--el-text-color-secondary);
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>