【报Bug】3.1.22 app上组件里slot使用v-for无法渲染数据

分类：uni-app

bug已修复

产品分类： uniapp/App

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： win10专业版 21H1

HBuilderX类型：正式

HBuilderX版本号： 3.1.22

手机系统： Android

手机系统版本号： Android 10

手机厂商： OPPO

手机机型： oppo R15

页面类型： vue

打包方式：云端

项目创建方式： HBuilderX

示例代码：

组件内部  
<view class="list-content" v-if="dataList.length" :class="contentClass">  
            <slot name="list-item" v-for="(item,index) in dataList" :item="item" :index="index"/>         
        </view>

页面引用  
<all-list ref="allList">  
                <template #list-item="{item, index}">  
                    <view class="u-flex item-message u-border-bottom">  
                            {{item.name}}                     
                        </view>  
                </template>  
            </all-list>

操作步骤：

如上代码,,写个all-list组件,写点数据..之后在页面引用组件

预期结果：

可以渲染出来数据

实际结果：

app上不可以渲染出来

bug描述：

app上组件里slot使用v-for无法渲染数据!!app上组件里slot使用v-for无法渲染数据!!app上组件里slot使用v-for无法渲染数据!!

2021-09-05 18:05 负责人:无分享

8 个回复

最佳回复

DCloud_UNI_GSQ

HBuilderX alpha 3.2.13+ 已修复

临时解决办法，slot 外包装一层其他标签（并修正样式）：

<template>  
    <view class="list-content" v-if="dataList.length">  
        <view v-for="(item,index) in dataList">  
            <slot name="list-item" :item="item" :index="index" />  
        </view>  
    </view>  
</template>

[已删除] (作者)

我就是这样包裹的。。。但是那个view必须设置样式。。不然里面的列表是3个一排的时候加了marginright的时候无法设置:nth-child(3n){margin-right:0};导致变得麻烦了

2021-10-28 17:28
[已删除] (作者)

slot,template都无法使用v-for，希望能一并解决

2021-11-09 10:39
DCloud_UNI_GSQ

回复 1***@qq.com: 更新试试吧

2021-11-15 11:35
xLzii

回复 1***@qq.com: 试一下随便加个标签，弄一点空字符串内容，然后让宽高都为0.这个方案通用解决block标签循环无法渲染的问题

2021-11-15 12:03