AI 助理
文档备案控制台
开发者社区 开发与运维 文章 正文

成功解决：[‘‘, ‘‘, __ob__: Observer]

2024-08-16 1293
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 这篇文章介绍了Vue框架中数组出现`__ob__: Observer`属性的原因和解决方法，说明了Vue如何通过观察者模式实现数据与视图的双向绑定，并提供了如何避免数组被Vue接管导致无法取值的解决方案。

文章目录

  • 1、问题说明
  • 2、问题出现的原因
  • 3、解决方法
  • 4、成功解决

在项目中遇到的实际问题

1、问题说明

我要取一个数组中的数据，对数组中的数据进行处理，但是取出来的不正确。

将要处理的数组打印输出到控制台。看到打印出的数组是这个样子的
在这里插入图片描述

在这里插入图片描述

2、问题出现的原因

为什么数组后面会出现__ob__: Observer ，这个后缀其实是Vue监控变量产生的，如果你是使用 push添加的对象信息就会出现__ob__: Observer 。同步和异步的问题

3、解决方法

设置一个延迟、等数据加载结束后、在操作数据

在这里插入图片描述

4、成功解决

在这里插入图片描述

文章标签：
JavaScript
监控
热爱技术的小郑
目录
相关文章
_揽
|
JavaScript
vue elementUI select下拉框设置默认值
vue elementUI select下拉框设置默认值
_揽
2561 0
刘大猫.
|
缓存 JavaScript Java
vue2知识点：组件的props属性、非props属性、props属性校验
vue2知识点：组件的props属性、非props属性、props属性校验
刘大猫.
608 4
数据知道
|
安全 Unix 网络安全
你真的理解ssh吗？5分钟ssh入门到精通
这篇文章提供了SSH的基础知识、基础使用、高级配置方法，以及如何实现SSH的免密登录，帮助用户从入门到精通SSH。
数据知道
2172 2
邹荣乐
|
JavaScript 索引
Vue中对象或数组数据更新但视图不刷新问题的解决策略
Vue中对象或数组数据更新但视图不刷新问题的解决策略
邹荣乐
1725 0
六卿
|
移动开发 前端开发 JavaScript
使用html-to-image代替html2canvas，结合jspdf实现下载pdf（下载截图下载前端dom元素）
本文介绍了在前端项目中，当使用`html2canvas`遇到问题时，如何使用`html-to-image`库作为替代方案，结合`jspdf`实现将DOM元素生成为PDF文件并提供下载。文章首先讨论了`html2canvas`可能遇到的问题，并提供了该库的使用示例代码。随后，详细介绍了`html-to-image`库的安装和使用方法，展示了如何将DOM元素转换为Canvas，再利用`jspdf`生成PDF文件。最后，文章通过示例代码说明了整个转换和下载的过程，并展示了效果截图。
六卿
1899 0
luckyzf332
|
前端开发 JavaScript
uniapp纯CSS实现圆形进度条组件
uniapp纯CSS实现圆形进度条组件
luckyzf332
1029 0
球球不吃虾
|
缓存 算法 JavaScript
vue中组件保活＜keep-alive＞的使用
vue中组件保活＜keep-alive＞的使用
球球不吃虾
1295 1
Yaiba123
|
JavaScript
Vue2之父与子组件互相传参和方法调用
这篇文章介绍了Vue 2中父子组件之间互相传参和方法调用的四种方式：通过`ref`调用子组件方法、通过`props`调用父组件方法、父组件通过`:param`传参给子组件，以及子组件通过`emit`传参给父组件。
Yaiba123
2964 0
讓丄帝愛伱
layui上传组件连续上传同一个文件upload组件无反应
layui上传组件连续上传同一个文件upload组件无反应
讓丄帝愛伱
954 0
Front_Yue
|
资源调度 数据可视化 JavaScript
完全入门ECharts：在UniApp中快速实现数据可视化
在开发过程中，我们经常需要使用到数据可视化工具来展示数据，而 ECharts 是一款非常流行的数据可视化工具，它可以帮助我们快速地创建所需的图表。在这篇博客中，我们将介绍如何在 Uniapp 中使用
Front_Yue
3732 0

热门文章

最新文章

  • 1
    MaxCompute问答整理之9月
  • 2
    RTMP、RTSP、HTTP视频协议详解（附：直播流地址、播放软件）
  • 3
    Windows Server 2019 中文版、英文版下载 (2025 年 2 月更新)
  • 4
    效率倍增！5款macOS下免费强大的剪切板增强工具
  • 5
    阿里云服务器的配置及搭建教程
  • 6
    杜蕾斯的双11：一场曼伦营销理论体系与阿里云数据中台相结合的实践
  • 7
    数据技术工程师成长之路
  • 8
    Next.js 适合什么类型的项目开发？
  • 9
    洛谷【10】P1089 [NOIP2004 提高组] 津津的储蓄计划
  • 10
    实现samba读写分离
  • 1
    阿里云 ESSD AutoPL 云盘完整指南：性能分层、计费规则与控制台操作
    51
  • 2
    同城O2O系统开发趋势分析：本地生活数字化下的新机会
    40
  • 3
    【AI】Agent 全栈进阶｜系统化学习路线专题
    241
  • 4
    创业团队开发聊天应用，需要解决哪些 IM 技术难题？
    54
  • 5
    互联网医院系统开发：HIS接口、电子病历与处方数据同步设计
    47
  • 6
    RAG系统测试实战：如何验证企业知识库AI助手是否可靠？
    15
  • 7
    风控系统如何从“管交易”延伸到“管IP”？IP风险画像落地指南
    57
  • 8
    LLM测试体系设计：从Prompt测试到模型质量评估的完整实践
    18
  • 9
    【AI时代软件项目管理系列】2. 从工具到数字员工：AI 在项目团队中的角色演进
    58
  • 10
    阿里云服务器弹性临时盘是什么？哪些ECS支持弹性临时盘？
    46

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    一条命令迁移，帮你实现 OpenClaw 与 Hermes Agent 记忆互通！