1***@qq.com
1***@qq.com
  • 发布:2021-08-19 09:17
  • 更新:2022-04-28 14:19
  • 阅读:680

【报Bug】模版渲染 v-if v-else-if 逻辑判断问题

分类:uni-app

产品分类: uniapp/小程序/阿里

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: macos catalina 11.1

HBuilderX类型: 正式

HBuilderX版本号: 3.1.13

第三方开发者工具版本号: 版本2.1.9 (2.1.9)

基础库版本号: 没关注

项目创建方式: HBuilderX

App下载地址或H5⽹址: 之前有类似bug: https://ask.dcloud.net.cn/question/105048

示例代码:
复制代码
<template>    
    <view>    
        <view @click="toggle">    
            点我    

        </view>   
                                        {{flag}} {{ isTrue(card.number)}} {{hasOwn(card.number)}}  
            <view v-if="flag && isTrue(card.number) && hasOwn(card.number)">123</view>    
            <view v-else-if="hasOwn(card.number)">456</view>     
    </view>    
</template>    
<script>    
    export default{    
        data() {    
            return {    
                flag: true,    
                card: {    
                    number: [2]    
                }    
            }    
        },    
        methods: {    
            isTrue(item) {    
                return item.some(n => n > 1)    
            },    
            hasOwn(item) {    
                return item.length    
            },    
            toggle() {  
                                if (this.card.number[0] > 1) {  

                    this.$set(this.card, 'number', [1])    
                                } else {  
                    this.$set(this.card, 'number', [2])    
                                }   
                this.$nextTick(() => {    
                    console.log(this.flag && this.isTrue(this.card.number) && this.hasOwn(this.card.number), this.hasOwn(this.card.number))    
                })    
            }    
        }    
    }    
</script>    
<style></style>  

操作步骤:

v-if 逻辑永远无法展示

预期结果:

可以依次切换

实际结果:

有一处逻辑无法进入

bug描述:

复制代码
var render = function() {  
  var _vm = this  
  var _h = _vm.$createElement  
  var _c = _vm._self._c || _h  
  var m0 = _vm.isTrue(_vm.card.number)  
  var m1 = _vm.hasOwn(_vm.card.number)  
  var m2 = _vm.flag && _vm.isTrue(_vm.card.number)  
  var m3 = _vm.$root.m2 && _vm.hasOwn(_vm.card.number)  
  var m4 = !m3 ? _vm.hasOwn(_vm.card.number) : null  
  _vm.$mp.data = Object.assign(  
    {},  
    {  
      $root: {  
        m0: m0,  
        m1: m1,  
        m2: m2,  
        m3: m3,  
        m4: m4  
      }  
    }  
  )  
}  
2021-08-19 09:17 负责人:DCloud_UNI_GSQ 分享
已邀请:
DCloud_UNI_LXH

DCloud_UNI_LXH

HX更新至最新版试试

  • 1***@qq.com (作者)

    一样的 就是新版本出问题往回切都是一样的问题

    2021-08-20 11:47

  • 1***@qq.com (作者)

    目前暂时把这逻辑放在函数中判断执行 避免这bug


    只是这里模版的较复杂判断 上次提交过一类似bug 官方修复了

    上次地址: https://ask.dcloud.net.cn/question/105048

    官方模版这里代码是不是要review下或者添加详细注释

    这次在这里又出现类似bug

    2021-08-20 13:33

DCloud_UNI_GSQ

DCloud_UNI_GSQ

问题确认,已加分,后续修复。

HBuilderX alpha 3.4.8 已修复

3.4.7 版本临时解决方案,执行 npx patch-hbuilderx-plugins 修复

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

  • 标题 / 粗斜体
  • 代码片段
  • 超链接 / 图片 / 视频
  • 列表 / 引用

文章内容较多时,可以用标题分段 :

## 大标题 
### 小标题

斜体 / 粗体 :

**粗体** 
*斜体*
***粗斜体***

代码片段 :

``` javascript
代码片段
```

超链接 :

[链接文字](链接地址) 例: [百度](http://www.baidu.com)

图片 :

![图片说明](图片地址) 例: ![百度logo](http://www.baidu.com/img/bdlogo.gif)

视频 :

!![视频说明](视频地址) 例: !![优酷视频](http://youku.com)

有序列表 :

1. 123
2. 123
3. 123

无序列表 :

- 123
- 123
- 123

引用 : ( 双回车后结束引用 )

> 引用内容
引用内容
引用内容