uniapp开发[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug.

如下,uniapp开发nvue页面报如下警告:

15:30:25.079 [Vue warn]: Unhandled error during execution of render function
 at <UniGroupclass="w710 cell_group bg_white border_radius16 flex_row"top="10">
 at <Index__pageId=1__pagePath="pages/goods_detail/index"__pageQuery={}>
15:30:25.080 [Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core
 at <UniGroupclass="w710 cell_group bg_white border_radius16 flex_row"top="10">
 at <Index__pageId=1__pagePath="pages/goods_detail/index"__pageQuery={}>

出现此类错误,一般是动态获取的数据还没加载完就开始渲染了,所以就出现错误了。

要解决这个问题,就需要给要展示的数据所在的组件进行条件判断,如下:

<block v-if="(skuData.goods_color.length > 0 && skuData.goods_color[0].goods_color) || (skuData.goods_size.length > 0 && skuData.goods_size[0].goods_size)">
   <text class="f13" v-if="skuData.goods_color.length > 0 && skuData.goods_color[0].goods_color">{{ skuData.goods_color[0].goods_color }}</text>
   <text class="f13" v-if="skuData.goods_size.length > 0 && skuData.goods_size[0].goods_size">{{ skuData.goods_size[0].goods_size }}</text>
</block>

先来看下skuData的数据结构:

skuData: {
   goods_color: [],//颜色sku列表 [{goods_color:黑,indexs:[index0],selected:true},{goods_color:白,indexs:[index1,index2],disabled:false}]
   goods_size: [] //尺寸sku列表 [{goods_size:20,indexs:[index0,index1],selected:true},{goods_size:22,indexs:[index2],disabled:false}]
}

skuData本身是非空对象,无需判断,但是下边的goods_color、goods_size是两个数组,数据动态获取,所以就必须要先对数组长度进行判断,确定有数据才能进行下一级的判断。

v-if="(skuData.goods_color.length > 0 && skuData.goods_color[0].goods_color) || (skuData.goods_size.length > 0 && skuData.goods_size[0].goods_size)"

这样一级一级的判断到要渲染的数据,渲染的时候就不错报异常了。

当然,如果数据层级比较深,那么数据渲染的时候需要添加的条件判断也是会比较长的。

也许在小程序或者vue中不写部分层级也不会报错,但是完整的对每一级进行判断肯定是最正确的、兼容性最强的。

posted on   逍遥云天  阅读(2154)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
历史上的今天:
2018-11-23 微信小程序开发——以简单易懂的浏览器页面栈理解小程序的页面路由
2018-11-23 微信小程序开发——超链接或按钮点击跳转到其他页面失效
2018-11-23 小程序开发常见异常收集整理
2018-11-23 微信小程序开发——开发者工具无法输入中文的处理
2016-11-23 如何在移动设备上调试html5开发的网页
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

导航

统计

点击右上角即可分享
微信分享提示