关于 Vue “__ob__:Observer“ 属性的解决方案

news2025/7/19 15:15:41

问题描述

  • 我们操作 Vue 数据的时候,经常会看到这个属性: __ob__:Observer
  • 在我们操作这个数据的时候,如果想要单独拿这个数据里面的值,就会返回 undefined
  • 经过我在网上查找相关资料,发现 __ob__:Observer 是 Vue 中一个非常重要的知识点

原因分析:

那么什么是数据对象的 __ob__ 属性呢?

其实 __ob__:Observer 这些数据,是 Vue 框架对数据设置的监控器,一般是 不可以被枚举


解决方案:

下面是我在网上查资料找的几点解决方案,希望可以帮到大家:

  • 第一种: __ob__: Observer 是 Vue 对数据监控添加的属性,如果想去掉可以采用对象赋值的方式。
    举个例子:Object.assign({ },this.owner)
    扩展知识:Object.assign() 方法将所有可枚举和自有属性从一个或多个源对象复制到目标对象,返回修改后的对象。
  • 第二种: 比如说 list 里面存放的就是那些带有 __ob__:Observer 的数据,那么可以使用 JSON.parse(JSON.stringify(this.list)) 来进行解决
  • 第三种: 直接操作数据
    后端返回的数据
// 将后端返回的数据,赋值给我们定义的变量
// 举个例子:我们定义的变量叫做 tableData

this.tableData = res.data;  // 我们把后端返回的数据,赋值给我们的变量 this.tableData

如果我们是在控制台输出:  console.log(this.tableData.id)  // 就会返回 undefined

但是如果我们加上索引:  console.log(this.tableData[0].id)  // 就会得到我们想要的 id 了 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/406873.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【vue】diff 算法详解

一、diff算法是什么 diff算法是一种通过同层的树节点进行比较的高效算法 diff算法的目的就是找出新旧不同虚拟DOM之间的差异,使最小化的更新视图,所以 diff 算法本质上就是比较两个js对象的差异 特点 1. 比较只会在同层级进行,不会跨层级比较 2. 在diff…

原生JS实现飞机大战游戏 超详细解析 快来做一个自己玩吧

目录 1. 案例分析💨 2. 适配设备 💨 3. 背景滚动💨 4. hero操作💨 5. 敌机的创建与运动💨 6. 子弹的创建与运动💨 7. 碰撞检测💨 8. 统计得分💨 9. 设置开始与结束界面&…

疫情散去想看电影,使用css3动画实现一个阿凡达2完美开场

在历经了艰苦卓绝的3年抗疫后,疫情终于还是来了,很多小伙伴变成了小洋人酸奶,我相信过不了多少天,疫情终将散去,那个时候就可以和家人走进电影院啦。 今天用css布局一个阿凡达2的影院场景,提前过一过瘾。 目…

《uni-app》表单组件-form表单

本文分享的Form组件为uni-app的内置组件Form,非扩展组件,两者在用法上其实大同小异,只是扩展组件的属性以及事件更多…没有本质上的区别~ 《uni-app》表单组件-form表单一. 简介二. 基础用法三. submit事件四. reset事件五. repor…

Tomcat安装配置及IDEA配置方法【亲测有效】

Tomcat安装配置及IDEA配置1.下载Tomcat2.配置Tomcat环境变量3.安装Tomcat4.启动Tomcat5.测试Tomcat6.IDEA配置Tomcat1.下载Tomcat Tomcat9官网下载地址 选择自己需要的版本,一般选择Windows 64位压缩包版本: 下载完后安装解压即可,解压后的…

如何使用nvm切换node版本

我比较懒惰,如非必要,不喜欢npm版本切换来切换去,感觉浪费我编程的时间.后来发现,现在偷的懒都是为将来的忙碌埋下的祸根. 言归正传,本文主要是讲解一下,如何使用nvm进行npm版本的切换. 工欲善其事必先利其器,我们先下载nvm;直接上下载链接(针对windows哈,毕竟我没mac本); 下载…

Code For Better 谷歌开发者之声——初识Web与谷歌,拉起兴趣之心。

个人名片: 博主:酒徒ᝰ. 个人简介:沉醉在酒中,借着一股酒劲,去拼搏一个未来。 本篇励志:程序是我的生命,但我相信爱她甚过爱我的生命。 目录一、了解谷歌浏览器1. 简介2.优点二、认识Web1. 简介2. 特点2. 网…

【云原生 | 21】Docker运行Web服务实战之Apache

作者简介:🏅云计算领域优质创作者🏅新星计划第三季python赛道第一名🏅 阿里云ACE认证高级工程师🏅 ✒️个人主页:小鹏linux 💊个人社区:小鹏linux(个人社区)欢…

【微信小程序】如何获得自己当前的定位呢?本文利用逆地址解析、uni-app带你实现

目录 前言 效果展示 一、在腾讯定位服务配置微信小程序JavaScript SDK 二、使用uni-app获取定位的经纬度 三、 逆地址解析,获取精确定位 四、小提示 前言 效果展示 一、在腾讯定位服务配置微信小程序JavaScript SDK 在浏览器搜索腾讯定位服务,找…

React(四) ——hooks的使用

🧁个人主页:个人主页 ✌支持我 :点赞👍收藏🌼关注🧡 文章目录⛳React Hooks💸useState(保存组件状态)🥈useEffect(处理副作用)🔋useCallback(记忆函数&#…

Sass 和 SCSS

▣Sass (Syntactically Awesome StyleSheets),是由buby语言编写的一款css预处理语言,和html一样有严格的缩进风格,和css编写规范有着很大的出入,是不使用花括号和分号的,所以不被广为接受。 Sass 是一款强化 CSS 的辅助…

使用Nodejs搭建HTTP服务,并实现公网远程访问「内网穿透」

文章目录前言1.安装Node.js环境2.创建node.js服务3. 访问node.js 服务4.内网穿透4.1 安装配置cpolar内网穿透4.2 创建隧道映射本地端口5.固定公网地址前言 Node.js 是能够在服务器端运行 JavaScript 的开放源代码、跨平台运行环境。Node.js 由 OpenJS Foundation(原…

微信小程序|基于小程序+云开发制作一个菜谱小程序

今天吃什么?这是一个让强迫症左右为难的问题,跟随此文基于小程序+云开发制作一个菜谱小程序,根据现有食材一键生成菜谱,省心又省力。 一、小程序1. 创建小程序</

【python】喜欢XJJ?这不得来一波大采集?

前言 大家早好、午好、晚好吖 ❤ ~欢迎光临本文章 俗话说的好&#xff1a;技能学了~就要用在自己喜欢得东西上&#xff01;&#xff01; 这我不得听个话~我喜欢小姐姐&#xff0c;跳舞的小姐姐 这不得用python把小姐姐舞采集下来~嘿嘿嘿 完整源码、素材皆可点击文章下方名片…

Java web学生信息管理系统(jsp)

&#x1f95e;目录 &#x1f36c;1 概述 1.1课程设计目的 1.2预备知识 JAVAWeb&#xff1a; MySQL&#xff1a; JSP&#xff1a; 1.3实训的内容和要求 &#x1f36c;2 需求分析 2.1系统目标 2.2功能分析&#xff1a; 2.3开发环境&#xff1a; &#x1f36c;3 设计步…

大数据热点城市波动图案例【CSS3实现 + 原理分析 + 源码获取】

一&#xff1a;案例效果 本次案例我们分析一下数据可视化页面最常见的热点图是如何实现的&#xff0c;其原理并不复杂&#xff0c;只需要用到CSS3动画属性 animation 以及 keyframe 关键帧即可&#xff0c;重点是向外扩散的环如何布局比较合适&#xff0c;以及每个环怎么扩散何…

HTML 5标签搭建页面结构--1

本文标签: HTML基本语法 排版标签 媒体标签 链接标签 文章目录 前言 一、基础认识 1.认识网页 2.微博标准 3.web标准的构成 4.小结 二、HTML基本结构解读 2.HTML标签及结构 1.标签的结构: 2.排版标签: 2.文本格式化标签: 3.媒体标签: 1.图像相关标签: 2.图片标签的 title …

JavaScript-百炼成仙(第1节掌握JavaScript基础1.1-1.21)

文章目录1.1 第一章 初入宗门1.2 第二章 直接量1.3 第三章 数据类型1.4 第四章 数据类型扩展内容:1.5 第五章 基础考核1.6 第六章 何老1.7 第七章 对象数据类型1.8 第八章 对象的取值1.9 第九章 循环遍历的奥妙小结&#xff1a;For 循环1.10 第十章 对象内容的遍历1.11 第十一章…

30个题型+代码(冲刺2023蓝桥杯)(上)

愿意的可以跟我一起刷&#xff0c;每个类型做1~5题 &#xff0c;4月前还可以回来系统复习 目录 &#x1f34e;注意 &#x1f33c;前言 &#x1f33c;一&#xff0c;前缀和 &#x1f44a;&#xff08;一&#xff09;3956. 截断数组 &#x1f333;Time Limit Exceeded &a…

如何用python代码,更改照片尺寸,以及更换照片底色

前言 python浅浅替代ps&#xff1f;如何用代码来p证件照并且更换底色&#xff1f; 唉&#xff0c;有个小姐姐给我扔了张照片&#xff0c;叫我帮忙给她搞成证件照的尺寸还得换底色&#xff0c;她说自己忙的很 可惜电脑上没有ps只有pycharm&#xff0c;没得办法只能来试试看代…