vue computed计算不到数组或者对象的变化

form: {...childQuestionItems:[...{...score: 6}]
}
...
computed: {totalScore(){return this.form.childQuestionItems.reduce((sum,e)=> sum + Number(e.score || 0), 0)}
}    

想要computed 监听计算form.childQuestionItems改变后所有score的和
但是 computed并不监听。

原因

对象:
向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新属性,因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = ‘hi’)
数组:
Vue 不能检测以下数组的变动:
当你利用索引直接设置一个数组项时,例如:vm.items[indexOfItem] = newValue
当你修改数组的长度时,例如:vm.items.length = newLength

解决

Vue.set( target, key, value),
target: 要更改的数据源(可以是对象或者数组)
key: 要更改的具体数据
value: 重新赋的值。
// 或
Array.prototype.splice
splice(start, deleteCount, item1)
this.$set(this.form.childQuestionItems,this.form.childQuestionItems[questionIndex],form)

另一种方式

添加一个标记属性,当所要监听对象改变后标记属性值+1 ,computed计算标记属性。

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

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

相关文章

.NET Framework 与 .NET Core 与 .NET Standard 之间的差异

介绍 在本文中,我们将探讨 .NET Framework、.NET Core 和 .NET Standard 之间的差异。 .NET Framework 与 .NET Core .NET框架.NET核心 历史 .NET Framework 是 .NET 的第一个实现。 .NET Core 是 .NET 的最新实现。 开源 .NET Framework 的某些组件是开源的。 .N…

程序员该怎样爱护眼镜

当程序员是非常费眼睛的,一天中我们长期盯着电脑,眼镜会感到酸痛,所以我们大家要学会放松眼镜,下面是一些方法,大家来跟着动起来吧! 1.修改编程软件字体大小 我们可以根据个人喜好将字体大小调成自己觉得…

Linux和windows进程同步与线程同步那些事儿(二): windows线程同步详解示例

《Linux和windows进程同步与线程同步那些事儿(一)》 一、线程同步 1.1 windows下线程同步 在Windows中,线程同步可以通过多种机制来实现,其中最常见的包括互斥量(mutex)、事件(event&#xf…

【python可视化大屏】使用python实现可拖拽数据可视化大屏

介绍: 我在前几期分享了关于爬取weibo评论的爬虫,同时也分享了如何去进行数据可视化的操作。但是之前的可视化都是单独的,没有办法在一个界面上展示的。这样一来呢,大家在看的时候其实是很不方便的,就是没有办法一目了…

vue项目完整搭建与启动

vue项目完整搭建与启动 一,安装node环境二,安装vue脚手架(vue-cli)1.cnpm(淘宝镜像安装)2.npm安装3.yarn安装 三,创建vue项目四,cmd切换目录方式1方式2 一,安装node环境 1.下载地址…

uniapp微信小程序投票系统实战 (SpringBoot2+vue3.2+element plus ) -我创建的投票列表实现

锋哥原创的uniapp微信小程序投票系统实战: uniapp微信小程序投票系统实战课程 (SpringBoot2vue3.2element plus ) ( 火爆连载更新中... )_哔哩哔哩_bilibiliuniapp微信小程序投票系统实战课程 (SpringBoot2vue3.2element plus ) ( 火爆连载更新中... )共计21条视频…

GitLab clone 地址 不对

1丶问题描述 2丶解决方案 解决方案: 找到挂载到宿主机配置文件:gitlab.rb vi gitlab.rb 改成自己的ip 重启容器 docker restart gitlab 如果发现容器一直重启,可采用粗暴的方法,直接干掉当前容器,重新运行一个 …

SpringMVC-异常处理及常用组件

异常处理器 1.基于配置的异常处理 springmvc提供了一个处理控制器方法执行过程中所出现的异常的接口: HandlerExceptionResolver HandlerExceptionResolver接口的实现类有: DefaultHandlerExceptionResolver和SimpleMappingExceptionResolver springmvc提供了自定义的异常处…

Apache Doris (六十二): Spark Doris Connector - (2)-使用

🏡 个人主页:IT贫道-CSDN博客 🚩 私聊博主:私聊博主加WX好友,获取更多资料哦~ 🔔 博主个人B栈地址:豹哥教你学编程的个人空间-豹哥教你学编程个人主页-哔哩哔哩视频 目录 1. 将编译jar包加入本地Maven仓库

全版本Windows RCE漏洞复现CVE-2023-36025

漏洞简介 CVE-2023-36025是微软于11月补丁日发布的安全更新中修复Windows SmartScreen安全功能绕过漏洞。攻击者可以通过诱导用户单击特制的URL来利用该漏洞,对目标系统进行攻击。成功利用该漏洞的攻击者能够绕过Windows Defender SmartScreen检查及其相关提示。该漏…

2024年【R2移动式压力容器充装】考试资料及R2移动式压力容器充装理论考试

题库来源:安全生产模拟考试一点通公众号小程序 R2移动式压力容器充装考试资料根据新R2移动式压力容器充装考试大纲要求,安全生产模拟考试一点通将R2移动式压力容器充装模拟考试试题进行汇编,组成一套R2移动式压力容器充装全真模拟考试试题&a…

Node.js和npm

目录 01_Node.js01.什么是 Node.js目标讲解小结 02.fs模块-读写文件目标讲解小结 03.path模块-路径处理目标讲解小结 04.案例-压缩前端html目标讲解小结 05.认识URL中的端口号目标讲解小结 06.http模块-创建Web服务目标讲解小结 07.案例-浏览时钟目标讲解小结 02_Node.js模块化…

02-python的基础语法-01python字面量/注释/数据类型/数据类型转换

字面量 在代码中,被写下来的固定的值,被称为字面量。 python中哪些值是可以被写出来的呢?又该如何写呢? 字符串:又称文本,是由任意数量的字符如中文,英文,各类符号,数字组成。 这…

ES-极客学习第二部分ES 入门

基本概念 索引、文档、节点、分片和API json 文档 文档的元数据 需要通过Kibana导入Sample Data的电商数据。具体参考“2.2节-Kibana的安装与界面快速浏览” 索引 kibana 管理ES索引 在系统中找到kibana配置文件(我这里是etc/kibana/kibana.yml) vim /…

redis(1)

redis 缓存穿透 1.什么是缓存穿透呢? 当客户端访问数据库一个不存在的数据时,数据库查询不到也不会添加在缓存中,所以客户端的每次访问都会去查数据库,这有可能会导致数据库垮掉。 2.解决方案 1.缓存空数据,即便查…

Oracle与Java JDBC数据类型对照

Oracle Database JDBC开发人员指南和参考 SQL Data TypesJDBC Type CodesStandard Java TypesOracle Extension Java Types CHAR java.sql.Types.CHAR java.lang.String oracle.sql.CHAR VARCHAR2 java.sql.Types.VARCHAR java.lang.String oracle.sql.CHAR LONG jav…

vue使用sm2对手机号邮箱等加签名,数据完整性

vue使用sm2对手机号邮箱等加签名,数据完整性 1、安装依赖 npm install --save sm-crypto2、在utils文件下新建sm2Util.js // sm2Util.js const SM2 require(sm-crypto).sm2; const publicKey woshigongyao // 公钥 const privateKey woshisiyao // 私钥/* * 加…

esp32UART串口外设(Arduino)

通用异步接收器/发送器 (UART) 介绍 通用异步接收器/发送器 (UART) 是一种硬件功能,它使用广泛采用的异步串行通信接口(如 RS232、RS422 和 RS485)处理通信(即时序要求和数据成帧&…

个人笔记:分布式大数据技术原理(二)构建在 Hadoop 框架之上的 Hive 与 Impala

大家想了解更多大数据相关内容请移驾我的课堂: 大数据相关课程 剖析及实践企业级大数据 数据架构规划设计 大厂架构师知识梳理:剖析及实践数据建模 有了 MapReduce,Tez 和 Spark 之后,程序员发现,MapReduce 的程序写起来真麻烦。他们希望简化这个过程。这就好比你有了汇编…

Vue-9、Vue事件修饰符

1、prevent 阻止默认事件 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>事件修饰符</title><!--引入vue--><script type"text/javascript" src"https://cdn.jsdeliv…