uni-app skyline 在自定义组件中使用v-for 报错误信息
uni-app skyline 在自定义组件中使用v-for 报错误信息
示例代码：
<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>
操作步骤：
- 自定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)
bug描述：
- skyline 在自定义组件中使用v-for 报错误信息 但是不影响渲染结果
更多关于uni-app skyline 在自定义组件中使用v-for 报错误信息的实战教程也可以访问 https://www.itying.com/category-93-b0.html
20 回复
你加个if试试
更多关于uni-app skyline 在自定义组件中使用v-for 报错误信息的实战教程也可以访问 https://www.itying.com/category-93-b0.html
看下你编译后的组件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>
在 Uni-App 中使用 Skyline 渲染引擎时，如果在自定义组件中使用 v-for 出现错误，可能是由于以下几个原因导致的。以下是一些常见的解决方案和排查步骤：
1. 检查 v-for 的语法是否正确
确保 v-for 的语法符合 Vue 的规范。v-for 应该绑定到一个数组或对象，并且需要提供唯一的 key 属性。
<template>
<view v-for="(item, index) in list" :key="index">
{{ item.name }}
</view>
</template>
<script>
export default {
data() {
return {
list: [
{ name: 'Item 1' },
{ name: 'Item 2' },
{ name: 'Item 3' }
]
};
}
};
</script>
2. 确保自定义组件的 props 定义正确
如果 v-for 渲染的是自定义组件，需要确保父组件传递的 props 定义正确。
<!-- 父组件 -->
<template>
<view>
<custom-component v-for="(item, index) in list" :key="index" :item="item" />
</view>
</template>
<script>
import CustomComponent from './CustomComponent.vue';
export default {
components: {
CustomComponent
},
data() {
return {
list: [
{ name: 'Item 1' },
{ name: 'Item 2' },
{ name: 'Item 3' }
]
};
}
};
</script>
<!-- 子组件 CustomComponent.vue -->
<template>
<view>
{{ item.name }}
</view>
</template>
<script>
export default {
props: {
item: {
type: Object,
required: true
}
}
};
</script>
3. 确保数据源是响应式的
v-for 依赖的数据源必须是响应式的。如果数据源是非响应式的，可能会导致渲染失败。
export default {
data() {
return {
list: [] // 确保数据源是响应式的
};
},
mounted() {
this.list = this.fetchData(); // 动态更新数据
},
methods: {
fetchData() {
return [
{ name: 'Item 1' },
{ name: 'Item 2' },
{ name: 'Item 3' }
];
}
}
};
4. 检查 Skyline 渲染引擎的兼容性
Skyline 渲染引擎是 Uni-App 的一种新的渲染模式，可能对某些 Vue 特性支持不完善。如果问题依然存在，可以尝试以下方法：
- 切换到默认的 WebView 渲染模式，检查是否正常运行。
- 确保使用的 Uni-App 版本是最新的，Skyline 渲染引擎仍在持续优化中。
// 在 pages.json 中关闭 Skyline 渲染
{
"globalStyle": {
"renderer": "webview"
}
}