- 定义一个组件page,组件代码是循环一个list,设置一个slot,引用page组件的地方,实现slot每行的部分
<view v-for="(item, index) in pageInfo.list" :key="index"> <slot :item="item"></slot> </view>
- 引用page组件,实现slot部分
<page ref="orderListPage" :url="pageInfo.url" :rows="pageInfo.rows" @complete="handlePageComplete"> <template v-slot="{item}"> <view class="list-item"> <image class="item-image" src="../../static/images/example.jpg" mode=""></image> <view class="item-content"> <text class="title">{{item['taskId']}}</text> <text class="small-title">xx</text> </view> <view class="item-complete">已完成{{item['requirement'] | precent(item['requirement'])}}</view> <view class="item-complete">已完成{{Math.floor(item['requirement'])}}</view> </view> </template> </page>
- 对比,不使用slot的数据,filter和数学计算都能正常显示
<view class="list-item"> <image class="item-image" src="../../static/images/example.jpg" mode=""></image> <view class="item-content"> <text class="title">xx</text> <text class="small-title">xx</text> </view> <view class="item-complete">已完成{{test.a | precent(test.b)}}</view> <view class="item-complete">已完成{{Math.floor(test.a)}}</view> </view>

- 发布:2020-08-31 16:55
- 更新:2020-08-31 16:55
- 阅读:538
产品分类: uniapp/小程序/微信
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: Windows10
HBuilderX类型: 正式
HBuilderX版本号: 2.8.8
第三方开发者工具版本号: 1.03.2006090
基础库版本号: ?
项目创建方式: HBuilderX
操作步骤:
预期结果:
已完成{{item['requirement'] | precent(item['requirement'])}} 使用filter的部分能正确显示
已完成{{Math.floor(item['requirement'])}} 数学计算的部分能正确显示
已完成{{item['requirement'] | precent(item['requirement'])}} 使用filter的部分能正确显示
已完成{{Math.floor(item['requirement'])}} 数学计算的部分能正确显示
实际结果:
报错
VM18979:1 [Vue warn]: Property or method "item" 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: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
报错
VM18979:1 [Vue warn]: Property or method "item" 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: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
bug描述:
slot的数据,只单纯显示的话没有问题
但是涉及到使用filter,或者使用Math中的方法,或者自定义的方法,slot的数据作为参数时报错