问题:vue2修改对象属性值,数据改变,但是页面视图不更新

目的:修改对象node的child属性的值,页面响应式变化
问题:数据是变了,但是页面没反应;在页面中用v-if绑定这个值,数据变了,视图也是不更新

错误写法:
this.node.child = ""
正确写法:
 this.$set(this.node, "child", "");

双向绑定的修改数据机制

我们使用v-if是一个双向绑定的过程 v-if:"isCommentShow[i]"
vue对于双向绑定的监视,是通过特定的方式实现的。如果双向绑定的对象是基本类型,则不影响。而如果双向绑定的变量是一个对象,是一个具有多个属性的对象,则需要响应式的绑定。
vue实现对对象的双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)设置属性值(set)的操作来实现的。如果要给对象添加新的属性,此时新属性没有进行过上述过程,是不会响应的。
我们如果直接修改变量的值,即this.变量 = 新值这种方式是没有经历重写的set方法的。双向绑定是没办法监听到我们的修改的。所以当我们修改了,输出的也是新值。但是你要让双向绑定知道你修改了才行,不是你改了,双向绑定就立刻知道你改了。
也就是我们需要用vue的规则去改,去通过对象重写的set方法去改对象的属性来达到响应式修改,能够立刻通知到双向绑定的指令,我修改了。
这个规则就是:this.$set(this.对象,属性名,新值)

总结

v-if不要绑定数组元素,无效,数组元素内容的变化无法响应v-if
v-if绑定对象属性 {1: true, 2: false},如果提前写死,v-if绑定其中一个属性,则可以生效v-if
如果对象的属性数量不定,是通过某方法的触发去改变对象的属性数量。需要使用$set()去更改对象的值, 如:

//增改都适用
this.$set(this.对象名, 属性名, 新值)//不可以使用下面的方法更新
this.对象.属性 = 新值
//或者
this.对象[属性] =

只要所有修改或者增加属性的语句都使用this.$set() ,就能解决 v-if 无法响应对象中动态变化的属性的问题。
————————————————
原文链接:https://blog.csdn.net/NineWaited/article/details/126258442
未整理

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

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

相关文章

TF签名上架

TF签名上架是一种通过上架苹果的内测商城TestFlight实现应用分发的技术。app封装打包这种技术相对于上架App Store来说较为宽松,但一般需要等待1-3天甚至更长的审核期。对于大多开发者来说,自行TF上架可能存在较高的驳回率,同时可能面临更漫长…

定时器的使用

目录 前言 正文 1.方法 schedule(TimerTask task, Date time) 的测试 (1)执行任务的时间晚于当前时间(在未来执行)的效果 (2)线程TimerThread不销毁的原因 (3)使用 public void cancel() 方法实现 T…

手写promis(2)-- 链式编程篇

目录 链式编程 处理异常 和普通内容 链式编程---处理返回promise 链式编程---处理重复引用 链式编程--rejected 链式编程--处理padding状态 链式编程 处理异常 和普通内容 1.返回promise实例:在原本then方法里边创建新promise2.获取返回值:把原本…

监控易:IT基础资源监控的解决方案和价值

随着企业业务的不断发展,IT基础资源监控的重要性日益凸显。IT基础资源监控不仅需要对网络、服务器、操作系统等基础设备进行实时监控,还需要对业务应用及安全设备进行全方位的管控。本文将详细介绍监控易运维管理软件对于IT基础资源监控的问题和挑战、解…

“SRP模型+”多技术融合在生态环境脆弱性评价模型构建、时空格局演变分析与RSEI 指数的生态质量评价及拓展应用

近年来,国内外学者在生态系统的敏感性、适应能力和潜在影响等方面开展了大量的生态脆弱性研究,他们普遍将生态脆弱性概念与农牧交错带、喀斯特地区、黄土高原区、流域、城市等相结合,评价不同类型研究区的生态脆弱特征,其研究内容…

Vue和React对比

Vue和React都是流行的前端JavaScript框架,它们有很多相似点和不同点,以下是它们的优缺点。 相似点: 都使用了组件化的开发模式,使得应用程序更易于理解和维护。都支持虚拟DOM,提高了页面重绘性能。都支持模板化编程方…

基于安卓android微信小程序的小型企业人力资源管理系统-人事考勤app

运行环境 开发语言:Java 框架:ssm JDK版本:JDK1.8 服务器:tomcat7 小程序框架:uniapp 小程序开发软件:HBuilder X 小程序运行软件:微信开发者 项目介绍 基于微信小程序的小型企业人力资源管…

C语言基本算法之选择排序

目录 概要: 代码如下 运行结果如下 概要: 它和冒泡排序一样,都是把数组元素按顺序排列,但是方法不同,冒泡排序是把较小值一个一个往后面移,选择排序则是直接找出最小值,可以这个说&#xff…

Python+OpenCV裂缝面积识别系统(部署教程&源码)

1.研究背景与意义 随着科技的不断发展,计算机视觉技术在各个领域中得到了广泛的应用。其中,图像处理是计算机视觉中的一个重要分支,它通过对图像进行数字化处理,提取出其中的有用信息,为后续的分析和应用提供支持。而…

Maven-自定义插件

Maven自定义插件 一、背景二、命名规范三、插件开发四、执行插件1.执行插件2.简化命令行2.1 命令格式为 mvn groupId:artifactId:goal2.2 命令格式为 mvn ${prefix}:goal 五、构建周期执行插件总结参考链接: 一、背景 Maven是由一系列用于执行构建任务的插件和一个…

2023.11.22 -数据仓库

目录 https://blog.csdn.net/m0_49956154/article/details/134320307?spm1001.2014.3001.5501 1经典传统数仓架构 2离线大数据数仓架构 3数据仓库三层 数据运营层,源数据层(ODS)(Operational Data Store) 数据仓库层&#…

LeetCode39. Combination Sum

文章目录 一、题目二、题解 一、题目 Given an array of distinct integers candidates and a target integer target, return a list of all unique combinations of candidates where the chosen numbers sum to target. You may return the combinations in any order. Th…

新生儿近视:原因、科普和注意事项

引言: 近年来,新生儿近视的发病率逐渐上升,引起了广泛关注。新生儿近视的原因复杂,可能受到遗传、环境和行为等多方面因素的影响。本文将深入解析新生儿近视的原因,提供相关科普知识,并为父母和监护人提供…

线性代数 - 几何原理

目录 序言向量的定义线性组合、张成空间与向量基线性变换和矩阵线性复合变换与矩阵乘法三维空间的线性变换行列式矩阵的秩和逆矩阵维度变换点乘叉乘基变换特征值和特征向量抽象向量空间 序言 欢迎阅读这篇关于线性代数的文章。在这里,我们将从一个全新的角度去探索线…

酒店预订订房小程序源码系统+多酒店入驻 功能齐全 附带完整的搭建教程

随着互联网的快速发展,越来越多的人选择通过在线预订平台预订酒店。为了满足这一需求,我们开发了这个酒店预订订房小程序源码系统。该系统基于先进的云计算技术和大数据分析,旨在为用户提供更加便捷、智能的酒店预订服务。 以下是部分代码示…

排序算法--选择排序

实现逻辑 ① 第一轮从下标为 1 到下标为 n-1 的元素中选取最小值,若小于第一个数,则交换 ② 第二轮从下标为 2 到下标为 n-1 的元素中选取最小值,若小于第二个数,则交换 ③ 依次类推下去…… void print_array(int a[], int n){f…

MySQL 数据库下载

1 最新版 MySQL :: Download MySQL Community Server 2 存档版本(Archived Versions)-历史版本 MySQL :: Download MySQL Community Server (Archived Versions) 3 下载(样例: zip 方式) tip1: 可以下载安装文件的方式,也可以使用压缩包方式&#xff…

es基本语法 (kibana)

#添加 (不添加id默认会生成id) POST /cj/test {"name":"jack","sex":"1","age":12 } #添加 (id为第5个的) POST /cj/test/5 {"name":"jackson","sex":"1","age":12 } #条…

健康饮酒进家庭,国台酒业与碧桂园服务集团达成战略合作

11月19日,碧桂园服务集团与国台酒业集团战略合作发布会暨“健康饮酒进家庭”项目启动仪式在广州举行。 广东省酒类行业协会创会会长朱思旭,广东省酒类行业协会会长彭洪,碧桂园服务集团总裁徐彬淮,碧桂园服务集团酒类业务总经理、广…

便携式自动气象站让你随时随地掌握天气变化

WX-BXQX12 随着科技的发展,人们对气象信息的掌握越来越重要。无论是在日常生活中,还是在农业生产、旅游出行等领域,了解天气变化都显得至关重要。为了满足人们对气象信息的需求,一款名为“便携式自动气象站”的创新产品应运而生。…