1***@163.com
1***@163.com
  • 发布:2020-08-31 16:55
  • 更新:2020-08-31 16:55
  • 阅读:538

【报Bug】slot数据涉及计算时报错

分类:uni-app

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

PC开发环境操作系统: Windows

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

HBuilderX类型: 正式

HBuilderX版本号: 2.8.8

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

基础库版本号: ?

项目创建方式: HBuilderX

操作步骤:
  1. 定义一个组件page,组件代码是循环一个list,设置一个slot,引用page组件的地方,实现slot每行的部分
    <view v-for="(item, index) in pageInfo.list" :key="index">  
    <slot :item="item"></slot>  
    </view>
  2. 引用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>
  3. 对比,不使用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>

预期结果:

已完成{{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.

bug描述:

slot的数据,只单纯显示的话没有问题
但是涉及到使用filter,或者使用Math中的方法,或者自定义的方法,slot的数据作为参数时报错

2020-08-31 16:55 负责人:无 分享
已邀请:

该问题目前已经被锁定, 无法添加新回复