详细问题描述
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
0 个回复