避免初始化属性_数据渲染时出错_2种方案

原创 已于 2022-08-22 15:17:39 修改 · 132 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript

于 2022-08-22 15:08:25 首次发布
博客内容涉及一个前端开发问题，具体是轮播图显示异常。当同时使用两种数据初始化方案时，页面仅显示一张图片；去掉方案一后，能显示四张轮播图，但仍有错误。问题表现为间歇性正常，有时只能显示第一张图片。关闭并重新打开浏览器可暂时解决问题。博客主要探讨了前端轮播图的显示故障及其可能的解决方案。

方案1

给 data中数据, 特别是 集合中的数据, 给出 初始数据

在这里插入图片描述

方案2

取值之前判断

在这里插入图片描述

bug

对 轮播图, 同时 做了 上面 2种操作之后
页面只出现 一张图片
去掉 方案1操作之后, 可以显示 4个轮播图, 但是 后面3个, 还是不能出现, 只出现背景
关闭浏览器后, 重新打开 index.html后, 可以正常显示 4张 轮播图

在这里插入图片描述

正常显示, 4张轮播图

不过, 正常显示 4张轮播图, 是 间歇性正常,
时不时地, 只能显示 第1张,
实际测试, 关闭浏览器 全部页面, 重新打开 浏览器, 可以正常显示 4张 轮播图

在这里插入图片描述

zd7130a5
关注
React + Mermaid 图表渲染消失问题剖析及 4 种代码级修复方案
qq_40286307的博客
07-18 2191
在React应用中集成Mermaid图表时，常遇到图表在重新渲染后消失的问题，这源于React虚拟DOM与Mermaid直接操作真实DOM的冲突。Mermaid通过添加data-processed属性标记已渲染图表，而React更新时会覆盖这些修改。解决方案包括：1）清除data-processed属性并重新触发Mermaid渲染；2）使用mermaid.render()手动生成SVG；3）利用useLayoutEffect确保同步渲染；4）高级方案使用MutationObserver监控DOM变化。
python交通调查数据处理_Python突破高德API限制爬取交通态势数据+GIS可视化（超详细）...
weixin_39594191的博客
11-24 2911
一、需求：爬取高德的交通态势API，将数据可视化为含有交通态势信息的矢量路网数据。二、使用的工具：Python IDLE、记事本编辑器、ArcGIS 10.2、申请的高德开发者KEY（免费）。三、主要思路：本文的思路是使用Python的requests模块爬取高德API的返回信息，将返回的信息数据（JSON），通过代码解析的方式存入CSV文件中，再导入ArcGIS中进行可视化处理。四、分析阶段：根...
深入理解LiveCharts与LiveCharts2图表库：.NET数据可视化指南
weixin_42443533的博客
08-20 1583
LiveCharts是由Daniel Segura Murcia开发的一个开源图表库，它提供了一种便捷的方式来在.NET应用程序中展示数据。LiveCharts2是它的继任者，不仅继承了前者的所有功能，还提供了对更多的图表类型和更灵活的配置选项的支持。它支持多种.NET平台，包括.NET Framework和.NET Core，能够帮助开发者在不同的应用程序类型中创建交互式图表。在数据可视化领域，交互性和自定义样式是提升用户体验的重要因素。
微信小程序编写tabBar模板，map组件markers属性动态初始化
sinat_36947685的博客
02-13 1238
一：编写tabBar模板 众所周知，微信小程序的tabBar都是新开页面的，而微信文档上又表明了最多只能打开5层页面。这样就很容易导致出问题啦，假如我的tabBar有5个呢？下面是微信原话： 一个应用同时只能打开5个页面，当已经打开了5个页面之后，wx.navigateTo不能正常打开新页面。请避免多层级的交互方式，或者使用wx.redirectTo 因此这几天想着根据微信tab
Plugin - 插件开发05_Solon中的插件实现机制
小工匠
12-07 4408
本系列在内核知识的基础上做进一步延申。插件插件扩展体系（Spi）插件体外扩展体系（E-Spi）插件热插拔管理机制（H-Spi）这些知识，为构建大的项目架构会有重要帮助。Solon的插件扩展机制简化了模块化的开发和插件的管理，允许开发者将可复用的功能封装成插件，并通过配置文件进行管理和加载。插件的核心作用是在应用启动时提供初始化和生命周期管理的功能，使得模块化的能力可以灵活地集成到系统中。插件的类型非常多样，例如像@Tran@Cache。
jquery源码_详细中文注释
huang714的专栏
02-27 6503
/*! * jQuery JavaScript Library v1.10.2 * http://jquery.com/ * Copyright 2005, 2013 jQuery Foundation, Inc. and other contributors * Released under the MIT license * http://jquery.org/license *...
读书笔记_Unity3d 游戏优化2
罗家胜的博客
06-23 3913
推荐序2 成为一名优秀的游戏客户端开发者，不仅需要常年的实践积累与思考，更需要夯实的基础为支撑。大部分开发者都很努力刻苦，但是为什么不同开发者之间的能力参差不齐？这是因为日常开发过程中的经验很多时候只是冰山一角，冰山之下隐藏的奥秘却少为人知。挖掘隐匿于冰山之下的宝藏需要开发者具有夯实的基础。所谓“九层之台，起于累土”，古人警示名言用在此处最为恰当 2021-03-24译者序网络上针对各式各样的问题也有针对性的解决方案，但是这些零碎的信息难以让读者形成系统的认知，很容易使读者陷入优化的陷阱或者很容易生搬硬套.
前端页面崩溃原因_前端异常监控解决方案研究
weixin_39775029的博客
12-30 5414
摘要： 异常监控不复杂也不简单啊...原文：前端异常监控解决方案研究作者：frustigor前端监控包括行为监控、异常监控、性能监控等，本文主要讨论异常监控。对于前端而言，和后端处于同一个监控系统中，前端有自己的监控方案，后端也有自己等监控方案，但两者并不分离，因为一个用户在操作应用过程中如果出现异常，有可能是前端引起，也有可能是后端引起，需要有一个机制，将前后端串联起来，使监控本身统一于监控系统...
浏览器从输入URL到页面渲染加载的过程（浏览器知识体系整理）
铁锤妹妹的博客
05-10 8970
记得最开始学前端知识时，是一点一点的积累，一个知识点一个知识点的攻克。 就这样，虽然在很长一段时间内积累了不少的知识，但是，总是无法将它串联到一起。每次梳理时都是很分散的，无法保持思路连贯性。
vue2如何优雅的初始化data里面定义的数据
04-03
嗯，用户问的是如何在Vue2中优雅地初始化data里的数据。首先，我需要回顾一下Vue2的data选项工作机制。Vue2中，data必须是一个函数，返回一个对象，这样每个组件实例才能有独立的数据副本。那用户可能遇到的情况是，...
我在data定义了初始化数据，为什么说找不到这个字段
09-23
如果存在异步获取数据的情况，那么一开始`obj.config`可能是空对象（初始化时给了空对象），然后异步数据回来后再填充属性，这样就不会出错。 步骤4：考虑使用计算属性（避免模板中出现过长的链式访问） 我们可以...
热更新技术路径探秘：《最后一战》通过Lua_IL2CPP实现代码热修复的4种部署方案
!... # 摘要 ...通过构建热修复理论模型，设计并实现了四种典型部署方案，涵盖全量Lua驱动、关键逻辑Lua化、方法级补丁替换及Lua协程状态机体系，在运行时动态加载、方法替换与跨语言交互等方面取得突破。
TELEMAC_2D模拟结果后处理：数据分析与可视化高级技巧
[TELEMAC_2D模拟结果后处理：数据分析与可视化高级技巧](https://resourcefulscholarshub.com/wp-content/uploads/2022/11/SPSS-Tutorial-6.png) 参考资源链接：[TELEMAC-2D水动力模拟：开源二维洪水淹没建模指南]...
pdf.js(pdfdist)踩坑workerSrc报错pdf.worker.mjs无法正确获取
weixin_39729729的博客
12-22 200
最近用pdf.js踩坑了几个点，其实本质都是workerSrc配置的问题，pdf.js引用了.mjs文件但又没做好处理，导致需要我们额外单独配置这一块。第一次遇到的时候我习惯性交给AI，AI按照搜索结果修改了workerSrc配置，解决了引用的为题，但是最终部署服务器还是不能用。后面还是人工花了些功夫把这个点搞明白，然后手动改了nginx配置才修复。AI还得加油啊！你以后可是我们的赛博牛马。
八股文-JavaScript（第一天）
qq_55961367的博客
12-22 1089
本文总结了前端开发中的多个核心知识点：1. 事件机制方面，列出了不会冒泡的事件类型，并比较了mouseEnter与mouseOver的区别；2. JavaScript特性包括MessageChannel通信、async/await原理、Proxy监听、解构赋值、变量提升和作用域链；3. React相关知识点涉及useState批量更新、Portals使用和React与React-DOM的关系；4. Vue部分包含响应式原理、生命周期钩子差异和请求发起时机；5. 模块系统对比了CommonJS与ES6的差异；
【Typescript】未知类型如何处理？
最新发布
纠缠AI的亮子
12-22 231
The error happens because Prisma’s type is a union of all valid JSON types: .TypeScript is complaining because a string or a number does not have a property named . Even though you know is likely an object, TypeScript must account for the possibility tha
vue + iview + vue-i18n中英翻译
pingguocu3的博客
12-22 93
)星期一:'mon',星期二:'tue',星期三:'wed',星期四:'thu',星期五:'fri',星期六:'sat',星期日:'sun',©著作权归作者所有,转载或内容合作请联系作者平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
vue2/vue3前端创建脚手架并引入RBAC权限模型
demotang的博客
12-18 216
本文介绍了基于Vue的RBAC权限管理系统实现方案。主要内容包括：1) 使用VueCLI创建项目并配置基础结构；2) 封装axios请求，实现请求/响应拦截；3) 通过Vuex管理角色和权限状态；4) 实现路由守卫和动态路由生成；5) 开发权限指令和按钮组件进行细粒度控制；6) 完整RBAC流程实现，包括登录认证、权限获取和访问控制。该方案覆盖了前端RBAC的核心功能，可根据项目需求灵活调整。
第4 课：Vue 3 路由与状态管理实战 —— 从单页面到多页面应用
2503_94434664的博客
12-21 1230
摘要：本课程重点讲解Vue3多页面应用开发，通过VueRouter实现页面路由跳转，使用Pinia进行全局状态管理。课程内容包括：1) 安装配置VueRouter和Pinia；2) 创建路由规则和页面组件；3) 实现动态路由参数传递；4) 构建Pinia Store管理全局待办数据；5) 完成包含首页、列表页和详情页的多页面待办应用。通过实战演示了路由跳转、状态共享等核心功能，并建议扩展本地存储和编辑功能。最终将单页面Demo升级为企业级多页面应用，为后续学习HTTP请求和UI库打下基础。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值