引用了一个组件的时候，在组件的下面v-for循环了一个请求的来的数据，结果打印数据的对象，引用的组件没问题，打印数据里面的数组（打印出来了），引用组件的css和js都加载不出来

分类：uni-app

自定义组件

cid unmatched [object Object] at view.umd.min.js:1
15:37:08.572 TypeError: Invalid attempt to destructure non-iterable instance.
15:37:08.592 In order to be iterable, non-array objects must have a [Symbol.iterator]() method. at view.umd.min.js:1
15:37:08.712 TypeError: undefined is not an object (evaluating '_vm.decoration_home.content.topSearch')
15:37:09.052 Not found -1,1 at view.umd.min.js:1

这些错也没有显示了

0 赞关注分享

12 个评论

要回复文章请先登录或注册

itmonkey

插槽的原因

2022-03-16 16:08

梦尋Junjie

我也遇到这个问题但不是 v-for 循环
而是标签映入

在 App 端使用了这样的代码
```
<slot name="before" slot="before" />

```
需要更替为就解决了

```
<view slot="before"><slot name="before"/></view>
```

2022-03-16 15:03

1***@qq.com

评率

2022-02-23 20:32

3***@qq.com

就是key值，如果默认一个list=[]，你异步去获取后list=[{id:1},{id:2},{id:3}],你代码写<view v-for="item in list" :key="item.id"></view>app端就会报错，只能用index去写<view v-for="(item,index)in list" :key="index"></view>

2021-04-28 14:51

小少年报 (作者)

我在明确一下我的解决方案，不管你是在data定义一个或者props接收一个空对象或者空数组，然后再created通过接口给当前的空对象或者空数组赋值，然后页面该空对象或者空数组进行遍历循环或者点语法，都会报这个错，我们公司大佬说不能定义空对象或者空数组去遍历循环（说这样太简单粗暴了。。。），要给你的遍历循环的值给一个默认值，就不会报错了，比如你定义了一个空数组，循环了里面的name,你就不能定义一个空数组，【{name: " " }】,至少要定义一个循环的对象，对象的点语法也是这样（TypeError: Invalid attempt to destructure non-iterable instance.）这个错就说明你循环的数组或对象为空，报错了，虽然我跟大佬狡辩，我在data或者props定义的是空,但是我在created调用了接口函数，赋值了呀，created执行完成之后才去渲染页面的嘛，应该没问题呀，大佬怎么说的我忘了，你有时候不报错有时候报错，可能就是因为接口异步调用，数据还没获取到，就渲染页面了，

所以我建议的方案：
+ 要么给你的空对象或者空数组，在对象或者数组中定义一些循环的默认值
+ 要么在循环遍历或者点语法的时候，给一个 v-if 判断（数组：判断length，对象：v-if="Object.keys(对象).lenght > 0" 或者 JSON.stringify(对象) !== "{}"）

2020-09-04 10:13

小少年报 (作者)

回复 doy ：

代码长，上传不了

2020-07-23 14:30

小少年报 (作者)

回复 doy ：

<template>
<view class="home animate__animated animate__fadeIn" v-cloak style="position: relative;">
<scroll-view scroll-y="true" :style="{'height': pageHeight + 'px'}" @scrolltolower="getNewList" @scroll="addClass">
<template>
<view v-for="(val,indexs) in decoration_view" :key="indexs + 'view'">

<carousel v-if="val.name === 'Carousel'"></carousel>
<eye v-if="val.name === 'Eye' && decoration_view.length > 0" :itemId="val.id"></eye>
<hot-sale v-if="val.name === 'HotSale'" :itemId="val.id"></hot-sale>
<puzzle v-if="val.name === 'Puzzle'" :itemId="val.id"></puzzle>
<scroll-show v-if="val.name === 'ScrollShow'" :itemId="val.id"></scroll-show>

<active-carousel v-if="val.name === 'ActiveCarousel'" :itemId="val.id"></active-carousel>
<plate v-if="val.name === 'Plate'" :page="page"></plate>
<uni-load-more v-if="val.name === 'Plate'" :showIcon="showIcon" :iconType="iconType" :status="statusMore" :contentText="contentText" ></uni-load-more>

</view>
</template>
</scroll-view>

<view v-for="(val,indexss) in decoration_view" :key="indexss + 'view'">
<floatWindow v-if="val.name === 'FloatWindow'" :scroll_end="scroll_end" />
</view>


<u-back-top :scroll-top="scrollTop"></u-back-top>
</view>
</template>

2020-07-23 14:29

小少年报 (作者)

回复 doy ：

我现在的代码已经跟当初的不一样了，我的代码是首页底部导航栏是可以动态设置的，首页的视图结构也是动态设置的，发帖的时候首页就一个展示首页的组件，现在是拆分了，比如轮播图拆成一个组件，多眼导航拆成一个组件，商品列表拆成一个组件等。
这个是我首页的数据结构了
<view class="home animate__animated animate__fadeIn" v-cloak style="position: relative;">
<scroll-view scroll-y="true" :style="{'height': pageHeight + 'px'}" @scrolltolower="getNewList" @scroll="addClass">
<template>
<view v-for="(val,indexs) in decoration_view" :key="indexs + 'view'">

<carousel v-if="val.name === 'Carousel'"></carousel>
<eye v-if="val.name === 'Eye' && decoration_view.length > 0" :itemId="val.id"></eye>
<hot-sale v-if="val.name === 'HotSale'" :itemId="val.id"></hot-sale>
<puzzle v-if="val.name === 'Puzzle'" :itemId="val.id"></puzzle>
<scroll-show v-if="val.name === 'ScrollShow'" :itemId="val.id"></scroll-show>

<active-carousel v-if="val.name === 'ActiveCarousel'" :itemId="val.id"></active-carousel>
<plate v-if="val.name === 'Plate'" :page="page"></plate>
<uni-load-more v-if="val.name === 'Plate'" :showIcon="showIcon" :iconType="iconType" :status="statusMore" :contentText="contentText" ></uni-load-more>

</view>
</template>
</scroll-view>

<view v-for="(val,indexss) in decoration_view" :key="indexss + 'view'">
<floatWindow v-if="val.name === 'FloatWindow'" :scroll_end="scroll_end" />
</view>


<u-back-top :scroll-top="scrollTop"></u-back-top>
</view>

2020-07-23 14:27