sonicsunsky
sonicsunsky
  • 发布:2020-08-14 16:09
  • 更新:2020-08-18 11:11
  • 阅读:1027

hbuildx最新版中模版渲染v-for循环内既有v-if判断又有methods和filter过滤器方法,微信开发工具控制台报错

分类:uni-app

产品分类: uniapp/小程序/微信

PC开发环境操作系统: Mac

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

HBuilderX类型: 正式

HBuilderX版本号: 2.8.5

第三方开发者工具版本号: 1.03.2006090

基础库版本号: 2.12.0

项目创建方式: HBuilderX

示例代码:
<block v-if="orderItem.deposit_credit_status > 0">  
                                <view class="deposit-credit">  
                                    <text>{{ orderItem.deposit_credit_status | formatOrderDepositCreditStr('first', orderItem.pay_status) }}</text>  
                                    <text>¥{{ orderItem.rent_deposit_total }}</text>  
                                </view>  

                                <view class="deposit-credit">  
                                    <text>{{ orderItem.deposit_credit_status | formatOrderDepositCreditStr('last', orderItem.pay_status) }}</text>  
                                    <text>¥{{ (Number(orderItem.order_amount) - Number(orderItem.rent_deposit_total)) | formatDecimalPlace }}</text>  
                                </view>  
                            </block>  

<view class="cost-deposit">  
                                        <text>押金</text>  
                                        <text :class="['price', item.is_sale === 1 ? 'del' : '']">¥{{ item.rent_deposit }}/台</text>  
                                        <text v-if="item.is_sale === 1" class="price">¥{{ formatPrice(item.rent_deposit) }}/台</text>  
                                    </view>

操作步骤:

一个v-for循环模版,里边使用method或过滤器方法渲染一个text节点,然后在该text节点上或text节点之前增加一个v-if判断同时使用
就会在微信开发工具控制台报错

预期结果:

控制台没有报错

实际结果:

控制台报错
[Vue warn]: Error in render: "TypeError: Cannot read property 'deposit_credit_status' of undefined"

(found in pages/order_list/order_list.vue)
VM5426:1 TypeError: Cannot read property 'deposit_credit_status' of undefined
at order_list.vue?21b8:50
at Proxy.Vue.__map (mp.runtime.esm.js?66fd:5933)
at Proxy.render (order_list.vue?21b8:43)
at VueComponent.Vue._render (mp.runtime.esm.js?66fd:3557)
at VueComponent.updateComponent (mp.runtime.esm.js?66fd:5697)
at Watcher.get (mp.runtime.esm.js?66fd:4417)
at Watcher.run (mp.runtime.esm.js?66fd:4492)
at flushSchedulerQueue (mp.runtime.esm.js?66fd:4248)
at Array.<anonymous> (mp.runtime.esm.js?66fd:1982)
at flushCallbacks (mp.runtime.esm.js?66fd:1910)

bug描述:

hbuildx最新版中模版渲染v-for循环内既有v-if判断又有methods和filter过滤器方法,微信开发工具控制台报错

切换到上一个版本是正常的,是升级之后出现的问题

v-for模版渲染内使用了methods或者filter过滤器方法,如果没有v-if的判断是正常渲染的;

或者有v-if判断,但是没有使用methods或者filter过滤器方法也是可以的,正常渲染;

但是既使用了methods或者过滤器方法而且又使用了v-if="item.xxx"的判断微信开发工具控制台会报错;

报错内容如下:

[Vue warn]: Error in render: "TypeError: Cannot read property 'deposit_credit_status' of undefined"
(found in pages/order_list/order_list.vue)
VM5426:1 TypeError: Cannot read property 'deposit_credit_status' of undefined
at order_list.vue?21b8:50
at Proxy.Vue.__map (mp.runtime.esm.js?66fd:5933)
at Proxy.render (order_list.vue?21b8:43)
at VueComponent.Vue._render (mp.runtime.esm.js?66fd:3557)
at VueComponent.updateComponent (mp.runtime.esm.js?66fd:5697)
at Watcher.get (mp.runtime.esm.js?66fd:4417)
at Watcher.run (mp.runtime.esm.js?66fd:4492)
at flushSchedulerQueue (mp.runtime.esm.js?66fd:4248)
at Array.<anonymous> (mp.runtime.esm.js?66fd:1982)
at flushCallbacks (mp.runtime.esm.js?66fd:1910)

2020-08-14 16:09 负责人:无 分享
已邀请:
DCloud_UNI_GSQ

DCloud_UNI_GSQ

更新到 2.8.6

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