uni-app 3.1.22 版本 app上组件里slot使用v-for无法渲染数据

uni-app 3.1.22 版本 app上组件里slot使用v-for无法渲染数据

开发环境 版本号 项目创建方式
Windows win10专业版 21H1 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

手机系统：Android

手机系统版本号：Android 10

手机厂商：OPPO

手机机型：oppo R15

页面类型：vue

打包方式：云端

示例代码：

组件内部  
<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>

更多关于uni-app 3.1.22 版本 app上组件里slot使用v-for无法渲染数据的实战教程也可以访问 https://www.itying.com/category-93-b0.html

14 回复

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>

更多关于uni-app 3.1.22 版本 app上组件里slot使用v-for无法渲染数据的实战教程也可以访问 https://www.itying.com/category-93-b0.html


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

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

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

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

请问这个问题何时解决呢?

自己顶一下

请问能解决吗

H5 端是否正常

h5是正常的,就app不行

解决了吗

我也遇到这个问题。

https://ask.dcloud.net.cn/question/95109

这是一个已知的 uni-app 3.1.22 版本在 App 平台上的 bug，主要涉及在组件内部使用 v-for 渲染具名插槽（named slot）时数据无法正常渲染的问题。

问题原因

在 uni-app 3.1.22 版本中，App 平台对 Vue 3 的插槽处理存在兼容性问题。当在组件内部使用 v-for 循环渲染具名插槽时，插槽的作用域数据（如 item、index）无法正确传递给父组件。

临时解决方案

方案一：使用作用域插槽的旧语法

将组件内部的代码改为使用作用域插槽的传统写法：

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

方案二：使用默认插槽替代

如果业务允许，可以考虑使用默认插槽：

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

<!-- 页面引用 -->
<all-list ref="allList">
    <template v-slot="{item, index}">
        <view class="u-flex item-message u-border-bottom">
            {{item.name}}
        </view>
    </template>
</all-list>
回到顶部