小李寻欢
小李寻欢
  • 发布:2020-02-28 10:56
  • 更新:2020-02-28 10:56
  • 阅读:2786

【报Bug】v-if 使用函数无效,v-else中的模板渲染方法不执行

分类:HBuilderX

详细问题描述

HX是从2.5.1升级到2.6.1 (2.6.1.20200226)发现运行为微信小程序时,达不到预期结果,H5上正常。尝试回退到上一版本,并删除unpackage,仍然有此问题

[内容]

v-if 的问题。

        <view class="company" v-if="showCompany()"> <!-- 将showCompany() 换为company 则正常 -->  
            <c-company :company="company"></c-company>  
            <block></block>  
        </view>  
       <view class="appointment" v-if="showAppointList()">  
            <uni-section title="预约记录" :addclasstype="'margin-top:0'"></uni-section>  
            <view class="uni-list">  
                <view class="li" v-for="(item, index) in appointList" :key="index">  
                    <image class="head" :src="item.heading"></image>  
                    ...  
                </view>  
            </view>  
        </view>
    methods: {  
        showAll() {  
            // #ifdef H5  
            this.nurseInformation = {};  
            this.company = {};  
            this.info = {};  
            return true;  
            // #endif  
            // #ifndef H5  
            return this.info != undefined;  
            // #endif  
        },  
        // 是否展示公司信息  
        showCompany() {  
            let show = !!this.company; // debug show为true  
            return true;  
        },  
        // 是否显示预约列表  
        showAppointList() {  
            // #ifdef H5  
            this.appointList = [1];  
            return true;  
            // #endif  
            // #ifndef H5  
            return this.appointList && this.appointList.length > 0;  
            // #endif  
        },

接口中返回的company和appointList都有值,但是在微信小程序(开发工具中出现,手机未验证)中,wxml中无view[class="company"]节点。界面上不显示公司信息。预约列表显示正常。
H5内置浏览器中,两者均显示正常。

v-else 条件分支下的模板方法不执行的问题。


                <block v-if="info">  
                    <text class="btn" v-if="status == 0" @tap="employ()">雇佣</text>  
                    <text class="btn btn-invert" v-else>{{ getStatus1()}}</text>  
                    <view class="btn" @tap="makecall()">  
                        <image class="small-icon" src="../../static/img/call.png" />  
                        拨打电话  
                    </view>  
                </block>
    computed: {  
        _getStatus1() {  
            let type = this.status;  
            let label = this.$getStatus1(type);   
            console.log('computed status', type, label); // 会有两次log (computed status 0 ) computed status 2 已雇佣  
            return label;  
        },  
    },  
    methods: {  
        // 获取状态  
        getStatus1() {  
            let type = this.status;  
            let label = this.$getStatus1(type);  
            console.log('methods status', type, label); // 一次log也没有  
            return label;  
        },

如果在template中这么写:
<text class="btn btn-invert" v-else>{{ getStatus1()}}</text>
发现getStauts1()方法不会执行,里面的log不会输出,debug也不会进入断点。

如果将{{}} 中的 getStatus1() 换成 _getStatus1() 发现_getStatus1() 方法会执行两次,第一次没有值,第二次有值,但是最终页面上还是显示为空( text[class="btn-invert"] 这个按钮是一个空的,无值)。

此问题也仅在微信小程序中(开发工具和手机均)出现,H5正常

PS: 我的临时解决方案为,data中额外定义一个status1变量,在_getStatus1()方法中,将label 赋值给status1 (this.status1 = label; //有一条vue-lint警告)。 然后在template 中是这么写的 <text class="btn btn-invert" v-else>{{ status1 }}</text> 则显示正常

PS: 我好多页面都是这样写的,目前就发现此页面有此问题,但是编译此文件,没有任何警告与错误(问题2我的临时解决方案vue lint不算)

重现步骤

[步骤]

[结果]

[期望]

IDE运行环境说明

HBuilderX 2.6.1.20200226

[IDE版本号]

[mac版本号]
10.14.4

uni-app运行环境说明

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

[运行端版本号]

[项目是HBuilderX创建的]

[编译模式是新的自定义组件模式]

联系方式

[QQ] 157250921

2020-02-28 10:56 负责人:无 分享
已邀请:

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