uni-app unicloud-db组件微信小程序报错 v-slot:default="{data, loading, error, options}"获取的值不能呈现

uni-app unicloud-db组件微信小程序报错 v-slot:default="{data, loading, error, options}"获取的值不能呈现

操作步骤：

  • 使用unicloud-db组件
  • 编译到微信小程序
  • 然后直接报错

预期结果：

  • 想要跟h5一样完美运行

实际结果：

  • 报错

bug描述：

<unicloud-db key="banner" v-slot:default="{data, loading, error, options}" collection="banner" where="location == 'home' && status == 1" field="image"  
    orderby="sort desc">  
    <view v-if="error">{{error.message}}</view>  
    <view class="dbLoading" v-else-if="loading">loading...</view>  
    <view v-else>  
        <swiper class="swiperContext" previous-margin="40rpx" next-margin="40rpx" circular indicator-color="#fff" indicator-active-color="#d81e06" autoplay>  
            <block v-for="item in data" :key="item._id">  
                <swiper-item>  
                    <navigator :url="`/pages/article/article?type=banner&id=${item._id}`">  
                        <image mode="widthFix" :src="item.image | imgSize({w: 640, h: 250})"></image>  
                    </navigator>  
                </swiper-item>  
            </block>  
        </swiper>  
    </view>  
</unicloud-db>

以上是代码，然后下面是微信开发者工具的报错。注意：H5都是好的

  • Property or method “error” is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
  • Property or method “loading” is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property
  • Property or method “data” is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property

更多关于uni-app unicloud-db组件微信小程序报错 v-slot:default="{data, loading, error, options}"获取的值不能呈现的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

更正一下，那个好像是警告，不知道为啥是红色的。渲染层出不来的原因是因为图片src使用了过滤器。
所以问题应该是：小程序中unicloud-db组件内slot内使用过滤器会导致渲染层直接出不来是什么原因，如果不能用过滤器那应该怎么办

更多关于uni-app unicloud-db组件微信小程序报错 v-slot:default="{data, loading, error, options}"获取的值不能呈现的实战教程也可以访问 https://www.itying.com/category-93-b0.html


自己搞定了，真的坑。 自己封装了一个image组件，然后把值穿进去，在组件里面使用过滤器

https://github.com/dcloudio/uni-app/issues/495

懂了，还有一个问题帮我解答下，我也另外提了一个bug的。就是nicloud-db组件使用loadtime="onready"时h5无法自动加载数据，必须手动执行以下loadData()，小程序正常。这个怎么搞

这个问题是由于微信小程序平台对作用域插槽的支持限制导致的。在微信小程序环境中，v-slot:default="{data, loading, error, options}" 这种解构语法可能无法正确解析。

解决方案是修改插槽的使用方式：

<unicloud-db key="banner" v-slot:default="slotData" collection="banner" where="location == 'home' && status == 1" field="image"  
    orderby="sort desc">  
    <view v-if="slotData.error">{{slotData.error.message}}</view>  
    <view class="dbLoading" v-else-if="slotData.loading">loading...</view>  
    <view v-else>  
        <swiper class="swiperContext" previous-margin="40rpx" next-margin="40rpx" circular indicator-color="#fff" indicator-active-color="#d81e06" autoplay>  
            <block v-for="item in slotData.data" :key="item._id">  
                <swiper-item>  
                    <navigator :url="`/pages/article/article?type=banner&id=${item._id}`">  
                        <image mode="widthFix" :src="item.image | imgSize({w: 640, h: 250})"></image>  
                    </navigator>  
                </swiper-item>  
            </block>  
        </swiper>  
    </view>  
</unicloud-db>
回到顶部