示例代码见压缩包
艺灵设计
- 发布：2020-08-13 17:31
- 更新：2020-11-20 16:09
- 阅读：916
产品分类： uniapp/小程序/微信
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： Microsoft Windows [版本 10.0.17763.1217]
HBuilderX类型： 正式
HBuilderX版本号： 2.8.5
第三方开发者工具版本号： 1.03.2006090
基础库版本号： 2.12.1
项目创建方式： HBuilderX
示例代码：
操作步骤：
保存上方代码后在HBuilderX中启动微信小程序，微信开发者工具直接报错
保存上方代码后在HBuilderX中启动微信小程序，微信开发者工具直接报错
预期结果：
预期结果是跟未升级前一样，程序正常运行
预期结果是跟未升级前一样，程序正常运行
实际结果：
现在编译报错了。
现在编译报错了。
bug描述：
我又来了，真是一时升级一时爽，升完级后bug场！
我之前在我的订单页面中使用了一个比较复杂的写法，在升级到2.8.5之前是没有问题的，早上升级后发现报错了。简单拆分代码后发现是 :class跟v-if同时使用后，解析出现了问题。注意这里的:class是通过调用方法来实现给按钮添加或移除禁用状态的。源码如下：
<view v-for="(item, index) in list" :key="index">
<button class="button button_cancel button_style_round button_size_middle" :class="{is_disabled: handleIsLoading(item.id, 'cancel')}" @click.stop="handleClickStop({type: 'cancel', status: item.delivery_status, id: item.id})" v-if="item.delivery_status !== -2">
<template v-if="item.refund_status === 1">删除订单</template>
<template v-else-if="item.refund_status === 2">取消</template>
</button>
</view>
<script>
export default {
data() {
return {
list:[
{id:1,delivery_status:0,name:'未付款',refund_status:2},
{id:2,delivery_status:1,name:'待发货',refund_status:2},
{id:3,delivery_status:2,name:'已签收',refund_status:1},
],
isLoadingCancel: false, // 取消等待
currentId:'', // 当前点击的id
}
},
methods: {
// 点击事件 2020-07-17 14:56:54
handleClickStop (options) {
this.currentId = options.id
},
// 计算当前点击的元素是否要禁用 2020-07-21 21:58:54
handleIsLoading (id, name) {
switch (name) {
case 'cancel':
if (this.currentId === id && this.isLoadingCancel) {
return true
} else {
return false
}
break;
}
},
},
}
</script>微信小程序中报错截图如下：
我发现代码被解析成了这样：
var m0 =
item.$orig.delivery_status !== -2
? _vm.handleIsLoading(item.id, "cancel")
: null至于class中我为什么要handleIsLoading方法而不是直接使用item.xxx，这个应该不重要吧，毕竟在升级到2.8.5之前代码是正常运行的。
另外 ，如果上述代码去掉
v-if="item.delivery_status !== -2"程序也能正常运行，但这我得改原代码了......
