当前位置: 首页 > news >正文

uniapp中初始化对象不赋值,后续属性无法绑定问题

比如初始化定义的对象是这样的

  info: {},

但是我其实从后端数据获取值后,数据会变成这样

  info: {flagStatus: null,},

但是会发现flagStatus这个属性是无法被跟踪到的

在uni-app中,以及在基于Vue.js的框架中,数据响应式依赖于数据对象的结构。当数据对象在初始化时仅声明为一个空对象 info: {},Vue.js 的响应式系统不会追踪这个空对象内部属性的变化。这意味着,如果你之后动态地添加属性到这个空对象上,例如 info.flagStatus,这些属性的变化不会被侦测到,从而不会触发视图的更新。

这是因为在 Vue.js 初始化时,它会对数据对象进行递归遍历,将其所有可枚举的属性转换为 getter/setter 形式的属性,以便能够追踪它们的变化。如果一个属性在初始化时不存在,那么它就不会被转换,也就无法被 Vue.js 的响应式系统追踪。

因此,为了确保数据变化能够被正确侦测,你应该在初始化时明确地定义所有的数据属性,就像你提到的那样:

  info: {flagStatus: null,},

这样,flagStatus 属性就会被 Vue.js 的响应式系统追踪,当你更新 info.flagStatus 时,视图会相应地更新。

另外,如果你确实需要动态添加属性,可以使用 Vue.set 或者 this.$set 方法,这可以确保新添加的属性也能被 Vue.js 的响应式系统追踪:

methods: {updateInfo() {this.$set(this.info, 'newProperty', 'newValue');},
}

使用 this.$set 方法可以确保即使是在运行时动态添加的属性也能触发视图的更新。

相关文章:

  • 掌握SQL Server事务日志的艺术:深入配置与管理
  • Spock Unit Test in Java
  • c++ 11 =delete
  • 数据结构(面试)
  • Java:类和对象
  • c++网络编程实战——开发基于协议的文件传输模块(一)如何实现一个简单的tcp长连接
  • vulnhub靶机:Tomato
  • 【Spring】详细了解静态代理和动态代理的使用
  • Android读取拨号记录功能
  • 【九】Hadoop3.3.4HA高可用配置
  • Vue3 + js-echarts 实现前端大屏可视化
  • java计算机毕设课设—网上招聘系统(附源码、文章、相关截图、部署视频)
  • 扩展------零拷贝技术(Mmap,SendFile)
  • 统计语言模型——Ngram
  • SpringMVC 工作流程简述
  • android高仿小视频、应用锁、3种存储库、QQ小红点动画、仿支付宝图表等源码...
  • CSS选择器——伪元素选择器之处理父元素高度及外边距溢出
  • Vue 2.3、2.4 知识点小结
  • vue从入门到进阶:计算属性computed与侦听器watch(三)
  • 力扣(LeetCode)965
  • 利用DataURL技术在网页上显示图片
  • 微信公众号开发小记——5.python微信红包
  • 微信小程序设置上一页数据
  • 一个项目push到多个远程Git仓库
  • 一些基于React、Vue、Node.js、MongoDB技术栈的实践项目
  • 移动端唤起键盘时取消position:fixed定位
  • 【运维趟坑回忆录 开篇】初入初创, 一脸懵
  • 阿里云服务器购买完整流程
  • ​Java并发新构件之Exchanger
  • #NOIP 2014# day.2 T2 寻找道路
  • (32位汇编 五)mov/add/sub/and/or/xor/not
  • (C++二叉树05) 合并二叉树 二叉搜索树中的搜索 验证二叉搜索树
  • (day 12)JavaScript学习笔记(数组3)
  • (DFS + 剪枝)【洛谷P1731】 [NOI1999] 生日蛋糕
  • (Java入门)学生管理系统
  • (二)正点原子I.MX6ULL u-boot移植
  • (每日持续更新)jdk api之StringBufferInputStream基础、应用、实战
  • (免费领源码)Python#MySQL图书馆管理系统071718-计算机毕业设计项目选题推荐
  • (四)【Jmeter】 JMeter的界面布局与组件概述
  • (五十)第 7 章 图(有向图的十字链表存储)
  • (已解决)vue+element-ui实现个人中心,仿照原神
  • (译) 理解 Elixir 中的宏 Macro, 第四部分:深入化
  • (原創) 如何讓IE7按第二次Ctrl + Tab時,回到原來的索引標籤? (Web) (IE) (OS) (Windows)...
  • (转)用.Net的File控件上传文件的解决方案
  • .NET 2.0中新增的一些TryGet,TryParse等方法
  • .NET使用存储过程实现对数据库的增删改查
  • [ C++ ] STL---仿函数与priority_queue
  • [ Linux ] git工具的基本使用(仓库的构建,提交)
  • [ 环境搭建篇 ] 安装 java 环境并配置环境变量(附 JDK1.8 安装包)
  • []指针
  • [3D基础]理解计算机3D图形学中的坐标系变换
  • [AX]AX2012开发新特性-禁止表或者表字段
  • [bzoj1038][ZJOI2008]瞭望塔
  • [C++] 轻熟类和对象
  • [CISCN 2019华东南]Web11