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

vue:当前对象添加对应值

this.$set(this.dynamicValidateForm.domains[index],  // 目标对象item.roundProperty,                       // 要添加的属性名row[item.roundProperty] ? row[item.roundProperty].split(",") : []  // 属性值
);

说明: 

  1. 第一个参数this.dynamicValidateForm.domains[index]

    • 这是要添加属性的目标对象,它是domains数组中指定索引位置的对象
  2. 第二个参数item.roundProperty

    • 这是要添加的新属性的名称,它是动态的,来自于item对象的roundProperty属性
  3. 第三个参数row[item.roundProperty] ? row[item.roundProperty].split(",") : []

    • 这是新属性的值,是一个数组
    • 如果row[item.roundProperty]存在值,则将该值按逗号分隔转换为数组
    • 如果不存在,则设置为空数组

为什么需要使用 this.$set ()

在 Vue 中,对象的响应式系统是基于 Object.defineProperty () 实现的。当一个 Vue 实例创建时,Vue 会遍历 data 选项中的所有属性,使用 Object.defineProperty () 将这些属性转换为 getter/setter。这样,当这些属性的值发生变化时,Vue 能够检测到变化并更新 DOM。

但是,如果在实例创建之后再向对象添加新属性,Vue 无法自动将这个新属性转换为响应式属性。这就是为什么需要使用this.$set()方法的原因 —— 它是 Vue 提供的一个工具方法,专门用于向响应式对象添加新属性,确保这个新属性也是响应式的。

http://www.lryc.cn/news/2402310.html

相关文章:

  • Tailwind CSS 实战:基于 Kooboo 构建 AI 对话框页面(七):消息框交互功能添加
  • JavaScript 核心原理深度解析-不停留于表面的VUE等的使用!
  • 【计算机网络】网络层IP协议与子网划分详解:从主机通信到网络设计的底层逻辑
  • 基于WSL搭建Ubnutu 20.04.6 LTS(二)-部署Docker环境
  • 【图像处理入门】6. 频域图像处理:傅里叶变换与滤波的奥秘
  • 基于开源AI智能名片链动2+1模式S2B2C商城小程序的生态农庄留存运营策略研究
  • Jenkins实现自动化部署Springboot项目到Docker容器(Jenkinsfile)
  • 【Linux】Git原理与使用
  • Cursor 工具项目构建指南: Python 3.8 环境下的 Prompt Rules 约束
  • A*算法实现原理以及实现步骤(C++)
  • Devops自动化运维---py基础篇一
  • 平安养老险蚌埠中心支公司开展金融宣教活动
  • 游戏设计模式 - 子类沙箱
  • java-springboot文件上传校验之只允许上传excel文件,且检查不能是脚本或者有害文件或可行性文件
  • openvino如何在c++中调用pytorch训练的模型
  • Redisson简明教程—你家的锁芯该换了
  • 48V带极性反接保护-差共模浪涌防护方案
  • Python----目标检测(使用YOLO 模型进行线程安全推理和流媒体源)
  • jvm学习第1day jvm简介,栈溢出、堆溢出
  • 用广告维持的免费 AI 图像生成工具(个人项目分享)
  • 分析Web3下数据保护的创新模式
  • ​减少交通拥堵、提高效率、改善交通安全的智慧交通开源了。
  • 协议融合驱动效能跃升:Modbus转Ethernet IP的挤出吹塑机应用
  • Hive的TextFile格式优化方法
  • bug 记录 - 使用 el-dialog 的 before-close 的坑
  • Next.js 中间件鉴权绕过漏洞 CVE-2025-29927
  • 基于YOLO-NAS-Pose的无人机象群姿态估计:群体行为分析的突破
  • 8天Python从入门到精通【itheima】-71~72(数据容器“序列”+案例练习)
  • 中达瑞和SHIS高光谱相机在黑色水彩笔墨迹鉴定中的应用
  • dvwa10——XSS(DOM)