8***@qq.com
8***@qq.com
  • 发布:2023-03-19 23:48
  • 更新:2023-03-20 13:16
  • 阅读:438

【报Bug】uni-app编译为小程序的时候报,双重循环时v-slot name报找不到方法

分类:uni-app

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

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: 13.2.1

HBuilderX类型: 正式

HBuilderX版本号: 3.7.3

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

基础库版本号: 2.30.2

项目创建方式: HBuilderX

示例代码:
<view>  
        <block v-for="(item,index) in tbodyData" :key="index">  
            <block v-for="(v,k) in options" :key="k">  
                <view class="item">  
                    <slot :name="v.name"  :item="item">  
                        <view class="label">{{v.label}}:</view>  
                        <view class="content">  
                            <block>{{item[v.name]}}</block>  
                        </view>  
                    </slot>  
                </view>  
            </block>  
        </block>  
    </view>  
<script>  
    export default {  
data(){  
            return{  
                tbodyData:[  
                    {'id':1,'sn':'202303190003929239'}  
                ],  
                options:[  
                    {'name':'id','label':'ID号'},  
                    {'name':'sn','label':'订单号'},  
                ],  
            }  
        },  

</script>

操作步骤:

我想为slot为sn的单独写样式。所以把name改为动态的v.name,实际name只能使用index或者item或者item.id都是可以。只能使用第一个循环的参数,如果使用v或者v.name或者k微信小程序开发工具都会报
[Vue warn]: Property or method "v" 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. See:

如果改成<slot name="{{v.name}}">这种写法。微信也报错  
Bad attr `wx  
查看编译后的wxml文件  
<view class="data-v-29c68c2e"><block wx:for="{{$root.l0}}" wx:for-item="item" wx:for-index="index" wx:key="index"><block class="data-v-29c68c2e"><block wx:for="{{options}}" wx:for-item="v" wx:for-index="k" wx:key="k"><block class="data-v-29c68c2e"><view class="item data-v-29c68c2e"><block wx:if="{{$slots.{{v.name}}}}"><slot name="{{v.name}}"></slot></block><block wx:else><view class="label data-v-29c68c2e">{{v.label+":"}}</view><view class="content data-v-29c68c2e"><block class="data-v-29c68c2e">{{item.$orig[v.name]}}</block></view></block></view></block></block></block></block></view>  
看到微信被编译成这样。  
感觉<block wx:if="{{$slots.{{v.name}}}}"><slot name="{{v.name}}"></slot></block>是这个出问题了。。{{$slots.{{v.name}}}}

预期结果:

可以在父组件调用子组件自定义某个类型的样式,想实现附件里面的订单号样式自定义

实际结果:

微信小程序报错

bug描述:

uniapp项目,用的是vue2,编译成微信小程序在双重循环时报错

2023-03-19 23:48 负责人:无 分享
已邀请:
DCloud_UNI_WZF

DCloud_UNI_WZF

vue2 复现该问题,感谢反馈,已加分

8***@qq.com

8***@qq.com (作者)

有什么临时解决办法吗?

要回复问题请先登录注册