<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>
- 发布:2023-03-19 23:48
- 更新:2023-03-20 13:16
- 阅读:449
产品分类: uniapp/小程序/微信
PC开发环境操作系统: Mac
PC开发环境操作系统版本号: 13.2.1
HBuilderX类型: 正式
HBuilderX版本号: 3.7.3
第三方开发者工具版本号: 1.06.2303060
基础库版本号: 2.30.2
项目创建方式: HBuilderX
示例代码:
操作步骤:
我想为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}}}}
我想为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,编译成微信小程序在双重循环时报错