<template>
<swiper
class="swiper"
:indicator-dots="true"
:autoplay="true"
:interval="5000"
:duration="500"
:circular="true"
>
<swiper-item v-for="item in props.banners" list-item>
<image class="swiper-img" mode="aspectFill" :src="item.url"></image>
</swiper-item>
</swiper>
</template>
<script setup lang="ts">
import { withDefaults } from "vue";
interface Banner {
url: string;
}
const props = withDefaults(
defineProps<{
banners: Array<Banner>;
width: string;
height: string;
}>(),
{
banners: [] as Array<Banner>,
width: "100vw",
height: "400rpx",
}
);
</script>
<style lang="less" scoped>
.swiper,
.swiper-item,
.swiper-img {
width: v-bind("width");
height: v-bind("height");
}
</style>
7***@qq.com
- 发布：2024-03-06 18:06
- 更新：2024-04-11 13:15
- 阅读：382
产品分类： uniapp/小程序/微信
PC开发环境操作系统： Mac
PC开发环境操作系统版本号： 12.6.3
第三方开发者工具版本号： vscode 1.87.0
基础库版本号： 3.0.0-3081220230817001
项目创建方式： CLI
CLI版本号： 3.0.0-3081220230817001
示例代码：
操作步骤：
自定banner组件 在index.vue中引用
自定banner组件 在index.vue中引用
预期结果：
正常渲染
正常渲染
实际结果：
正常渲染， 但是微信编辑器有报错信息
Error: The for-list data is neither Array nor Object, got type "undefined".
at Je.updateKeys (WAServiceMainContext.js?t=wechat&s=1709718907988&v=3.3.3:1)
at Je.diff (WAServiceMainContext.js?t=wechat&s=1709718907988&v=3.3.3:1)
at o (WAServiceMainContext.js?t=wechat&s=1709718907988&v=3.3.3:1)
at et.handleChildrenUpdate (WAServiceMainContext.js?t=wechat&s=1709718907988&v=3.3.3:1)
at s (WAServiceMainContext.js?t=wechat&s=1709718907988&v=3.3.3:1)
at et.handleChildrenUpdate (WAServiceMainContext.js?t=wechat&s=1709718907988&v=3.3.3:1)
at s (WAServiceMainContext.js?t=wechat&s=1709718907988&v=3.3.3:1)
at et.handleChildrenUpdate (WAServiceMainContext.js?t=wechat&s=1709718907988&v=3.3.3:1)
at et.update (WAServiceMainContext.js?t=wechat&s=1709718907988&v=3.3.3:1)
at ht.updateValues (WAServiceMainContext.js?t=wechat&s=1709718907988&v=3.3.3:1)(env: macOS,mp,1.06.2402021; lib: 3.3.3)
正常渲染， 但是微信编辑器有报错信息
Error: The for-list data is neither Array nor Object, got type "undefined".
at Je.updateKeys (WAServiceMainContext.js?t=wechat&s=1709718907988&v=3.3.3:1)
at Je.diff (WAServiceMainContext.js?t=wechat&s=1709718907988&v=3.3.3:1)
at o (WAServiceMainContext.js?t=wechat&s=1709718907988&v=3.3.3:1)
at et.handleChildrenUpdate (WAServiceMainContext.js?t=wechat&s=1709718907988&v=3.3.3:1)
at s (WAServiceMainContext.js?t=wechat&s=1709718907988&v=3.3.3:1)
at et.handleChildrenUpdate (WAServiceMainContext.js?t=wechat&s=1709718907988&v=3.3.3:1)
at s (WAServiceMainContext.js?t=wechat&s=1709718907988&v=3.3.3:1)
at et.handleChildrenUpdate (WAServiceMainContext.js?t=wechat&s=1709718907988&v=3.3.3:1)
at et.update (WAServiceMainContext.js?t=wechat&s=1709718907988&v=3.3.3:1)
at ht.updateValues (WAServiceMainContext.js?t=wechat&s=1709718907988&v=3.3.3:1)(env: macOS,mp,1.06.2402021; lib: 3.3.3)
bug描述：
skyline 在自定义组件中使用v-for 报错误信息 但是不影响渲染结果
看下你编译后的组件js中banners是Array还是null或undefined？ts编译会有这样的问题，建议将src属性更改为可选链语法：item?.url
<swiper-item v-for="item in banners" list-item>
<image class="swiper-img" mode="aspectFill" :src="item?.url"></image>
</swiper-item> 
