GUNDAM
GUNDAM
  • 发布:2019-09-18 13:25
  • 更新:2019-12-10 14:27
  • 阅读:1311

【报Bug】v-slot image src中调用方法 获取不到值 导致微信小程序端不能显示图片 app端均显示

分类:nvue

详细问题描述

(DCloud产品不会有明显的bug,所以你遇到的问题大都是在特定环境下才能重现的问题,请仔细描述你的环境和重现方式,否则DCloud很难排查解决你的问题)

[内容]
v-slot image src中调用方法 获取不到值 导致小程序端不能显示图片 app端均显示

重现步骤

父组件ddlist

<view>  
            <view class="noMessage" v-if="list.length==0">  
                <image :src="nomoreimgs" class="nomoreimg"></image>  
                <view class="nohistorys">  
                    <text class="noMessagetext">暂无消息...</text>  
                </view>  
            </view>  
            <view  v-for="(listitem,index) in list" :key="index">  
                <slot :listitem="listitem"></slot>  
            </view>  
            <view class="footer" v-show="list.length>0&&!lastPage">加载中...</view>  
            <view  class="nodatas" v-if="list.length>0&&lastPage">  
             <text class="nodatatext">没有更多数据了...</text>  
            </view>  
        </view>

页面中引入

<ddlist :nomoreimgs="nomoreimgs" :lastPage="lastPage" :height="listheight" :loadinging="loadingings" :list="bothInterestedList"  
             :refreshing="refreshings" @nowrefresh="nowrefresh" @nowloadmore="loadmores">  
                <template v-slot:default="{listitem}">  
                    <view class="listcontainer" @tap="openMatesCard(listitem.id, listitem.matchUserId,listitem.matchHeadImg)">  
                        <view class="rightcns">  
                            <image class="myheads myleft" :src="adjustimage(listitem.matchHeadImg)"></image>  
                            <view class="matchname">  
                                <view><text class="myname1">{{listitem.matchNickName}}</text></view>  
                                <view v-if="listitem.matchStatusDate"><text class="myname2">{{listitem.matchStatusDate}}</text></view>  
                            </view>  
                        </view>  
                        <text class="ddficon">&#xe63d;</text>  
                    </view>  
                </template>  
            </ddlist>

目前src中方法能调用到adjustimage方法 但是listitem不能访问到
但是小程序开放工具报
VM25598:1 [Vue warn]: Property or method "listitem" 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.
[步骤]
父组件

[结果]

[期望]
app端图片能正常显示
[如果语言难以表述清晰,拍一个视频或截图,有图有真相]

IDE运行环境说明

[HBuilder 或 HBuilderX。如果你用其他工具开发uni-app,也需要在此说明]

[IDE版本号]hbuilderx alpha2.2.7

[windows版本号]win7

[mac版本号]

uni-app运行环境说明

[运行端是h5或app或某个小程序?]app

[运行端版本号]

[项目是cli创建的还是HBuilderX创建的?如果是cli创建的,请更新到最新版cli再试]HBuilderX创建的

[编译模式是老模板模式还是新的自定义组件模式?]自定义组件模式

App运行环境说明

[Android版本号]

[iOS版本号]

[手机型号]

[模拟器型号]

附件

[IDE问题请提供HBuilderX运行日志。菜单帮助-查看运行日志,点右键打开文件所在目录,将log文件压缩成zip包上传]

[App问题请提供可重现问题的代码片段,你补充的细一点,问题就解决的快一点]

[App安装包或H5地址]

[可重现代码片段]

联系方式

[QQ]1927814063@qq.com

2019-09-18 13:25 负责人:无 分享
已邀请:
DCloud_UNI_HT

DCloud_UNI_HT

提供一个可以复现问题的简单 demo ,你贴的代码片段,看不出来具体什么问题。

  • GUNDAM (作者)

    马上给你写个

    2019-09-19 10:51

  • GUNDAM (作者)

    demo已补 运行到小程序开发工具就能复现

    2019-09-19 11:25

4***@qq.com

4***@qq.com

这个问题,解决了吗?

  • GUNDAM (作者)

    没有 换了方式做

    2019-12-10 14:22

4***@qq.com

4***@qq.com

有什么方式,较好地实现 slot scope

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