2***@qq.com
2***@qq.com
  • 发布:2023-06-20 11:26
  • 更新:2023-06-20 11:32
  • 阅读:211

【报Bug】slot在v-for循环中,无法渲染,内容为空

分类:uni-app

产品分类: uniapp/小程序/微信

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: Windows 11(22H2)

HBuilderX类型: 正式

HBuilderX版本号: 3.8.5

第三方开发者工具版本号: Stable 1.06.2303220

基础库版本号: 2.32.2

项目创建方式: HBuilderX

示例代码:

子组件

<view  
                v-for="(item, index) in dataList"  
                :key="index"  
                :style="{ 'border-radius': '8rpx', padding: `${padding}rpx` }"  
                @tap="() => $emit('tapHandle', item[fieldName.detailsId], item)"  
            >  
                <view class=" image">  
                    <u-image :width="imgWidth" :height="imgHeight" :src="item[fieldName.image]" :fade="true" mode="scaleToFill" :borderRadius="imgBorderRadius">  
                        <!-- 加载图片 -->  
                        <template #loading>  
                            <u-loading-icon mode="flower" />  
                        </template>  
                        <!-- 加载图片失败 -->  
                        <template #error>  
                            <view style="font-size: 32rpx">加载失败</view>  
                        </template>  
                    </u-image>  
                </view>  
                <slot name="content" :row="item">  
                    <view class="content">  
                            <view class="left">  
                                    <view class="title">{{ item[fieldName.title] || '' }}</view>  
                                    <view class="subTitle">{{ item[fieldName.subTitle] || '' }}</view>  
                            </view>  
                            <view class="right">  
                                <text class="topPrice">{{ `${item[fieldName.initialPrice] || 0}` }}</text>  
                                <view class="bottomPrice">  
                                    <text>{{ `${item[fieldName.currentPrice] || 0}` }}</text>  
                                </view>  
                            </view>  
                    </view>  
                </slot>  
            </view>  

操作步骤:

外层使用子组件

<cardList  
                v-else-if="current === 1"  
                type="level"  
                :name="{  
                    image: 'thumbnail',  
                    title: 'foodName'  
                }"  
                :dataList="categoryList[1].dataList"  
                :loadStatus="categoryList[1].loadStatus"  
                @tapHandle="(id, data) => tapCate(id, data)"  
                :padding="25"  
                imgWidth="310rpx"  
                imgHeight="210rpx"  
            >  
                <template #content="{ row }">  
                    <view class="content">  
                        <view class="foodName">{{ row.foodName || '' }}</view>  
                        <view class="label">{{ row.label || '' }}</view>  
                        <view class="introduction">{{ row.introduction || '' }}</view>  
                    </view>  
                </template>  
            </cardList>  

预期结果:

应该把外层的

<template #content="{ row }">  
                    <view class="content">  
                        <view class="foodName">{{ row.foodName || '' }}</view>  
                        <view class="label">{{ row.label || '' }}</view>  
                        <view class="introduction">{{ row.introduction || '' }}</view>  
                    </view>  
</template>

渲染出来

实际结果:

在开发工具调试器wxml中,插槽内容为空

bug描述:

组件中v-for循环里包含slot,外层使用组件,无法渲染出插槽内容

2023-06-20 11:26 负责人:无 分享
已邀请:
爱豆豆

爱豆豆 - 办法总比困难多

子组件代码呢?发出来

  • 2***@qq.com (作者)

    尝试把微信工具升级到Stable 1.06.2306020 就解决了

    2023-06-20 11:39

  • 爱豆豆

    回复 2***@qq.com: 可以

    2023-06-20 11:52

要回复问题请先登录注册