el-checkbox 状态不更新

news2024/9/22 17:35:28

文章目录

    • 数据处理代码片段 🌰 大概举例
    • 原因
    • 解决方法 - 深拷贝
    • forceUpdate - 强制更新

今天遇到了checkbox不更新的问题,相同的功能在其他地方正常使用,有些地方不能用。

数据处理代码片段 🌰 大概举例

从现有数据中过滤出新的数据,并且添加 selected 属性
在这里插入图片描述

原因

数据来源 / 浅拷贝 都会导致这个问题。

以上代码中处理数据后 直接赋值到 this.tableList 中,vue 只会将this.tableList指向filterData,并不会对这段数据添加响应式处理,所以修改数据时,修改的还是原数据。
(不添加响应式大概是因为:原数据是从 vue 的data中过滤出来的,filter方法并不会生成一个新的数组。 我理解不一定正确,仅供参考

浅拷贝原因同上。

如果数据是从接口查询后直接处理的,可以直接赋值。

解决方法 - 深拷贝


this.tableList = filterData
修改为
this.tableList = JSON.parse(JSON.stringify(filterData))

注意: 由于数据结构是 数组对象 格式,这里不能使用扩展运算符进行拷贝。否则数组中对象还是指向原数据。

forceUpdate - 强制更新

虽然很多此类情况都能使用 this.$fourceUpdate() 解决 ,但频繁使用会影响性能。

考虑性能的情况下不建议使用。
如非迫不得已 不建议使用。

不是所有地方都有 forceUpdate, 还是要学会自己找到问题原因,通过优化代码逻辑来解决问题。

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

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

相关文章

MySQL学习[4] ——MySQL锁

四、MySQL锁 4.1 MySQL有哪些锁? 4.1.1 全局锁 全局锁就是**对整个数据库实例加锁,主要用于全库逻辑备份**等场景。 flush tables with read lock # 加全局锁unlock tables # 解锁加上全局(读)锁后,整个数据库都…

网络安全-第二阶段-linux操作系统01

一. linux介绍: windows,mac,linux都是由unix系统发展而来。 linux:类unix系统; 二. Centos系统的安装: 可以去清华大学开源软件镜像站下载: 输入ip addr: 可以看到自己电脑的ip地址; 1. ssh远程连接linux: 使用windows或者linux的物理机或者虚拟机都可以连接上它,…

MPU6050+OLED读取姿态角(超级细讲)

STM32F103C8T6读取陀螺仪MPU6050的角度数据,使用6050自带DMP库姿态解算出各个方向的角度,并使用OLED实时刷新显示,同时可以将数据通过串口发送到计算机,每一组数据50ms。本操作过程简单,方便移植,显示屏接P…

ppt中添加页码(幻灯片编号)及问题解决方案

在幻灯片母版中,选择插入 幻灯片编号 右下角显示幻灯片编号 问题一:母版中没有显示编号 原因可能是母版版式中没有设置显示,勾选即可。 问题二:子母版中没有显示幻灯片 将母版中的编号复制到子母版中。 问题三:应用…

Element-UI自学实践

概述 Element-UI 是由饿了么前端团队推出的一款基于 Vue.js 2.0 的桌面端 UI 组件库。它为开发者提供了一套完整、易用、美观的组件解决方案,极大地提升了前端开发的效率和质量。本文为自学实践记录,详细内容见 📚 ElementUI官网 1. 基础组…

2024年7月文章一览

2024年7月编程人总共更新了5篇文章: 1.2024年6月文章一览 2.《Programming from the Ground Up》阅读笔记:p19-p48 3.《Programming from the Ground Up》阅读笔记:p49-p74 4.《Programming from the Ground Up》阅读笔记:p75…

深入理解Kafka核心设计与实践原理_03

深入理解Kafka核心设计与实践原理_03 03_消费者3.1消费者与消费者组3.2客户端开发3.2.1 必要的参数配置3.2.2 订阅主题与分区 草稿 03_消费者 与生产者对应的是消费者,应用程序可以通过KafkaConsumer来订阅主题,并从订阅的主题中拉取消息。不过在使用Ka…

Redis17-服务端优化

目录 持久化配置 慢查询 什么是慢查询 如何查看慢查询 命令及安全配置 内存配置 集群优化 持久化配置 Redis的持久化虽然可以保证数据安全,但也会带来很多额外的开销,因此持久化请遵循下列建议: 用来做缓存的Redis实例尽量不要开启持…

springboot项目打包jar 并打包为exe启动

springboot项目打包jar 并打包为exe启动(在无jdk环境下运行) 环境 SpringBoot Windows IDEA 实现 1.springboot打包为可执行jar(这里使用maven install) maven工具栏选择项目->Plugins ->install 注:如果…

Golang | Leetcode Golang题解之第332题重新安排行程

题目: 题解: func findItinerary(tickets [][]string) []string {var (m map[string][]string{}res []string)for _, ticket : range tickets {src, dst : ticket[0], ticket[1]m[src] append(m[src], dst)}for key : range m {sort.Strings(m[key])…

python对接vertx中踩的坑

需求 因为我们的硬件sdk只提供了python的版本,故需要python作为采集端来获取数据,然后将数据发送给java作为数据中心处理。 分析 这里就涉及到跨语言跨进程的数据的中转。有以下的几种解决方法 tcp:基于tcp自己拆包粘包,做心跳。一看就pa…

PV 与 PVC 状态迁移

文章目录 一、概述1、PV2、PVC 二、状态变化三、实例1、单独创建 PV1.1、创建并应用 PV1.2、查看刚创建的 PV 状态 2、单独创建 PVC2.1、创建并应用 PV2.2、查看刚创建的 PVC 状态 3、等待绑定4、删除 PV4.1、查看 PV,PVC 状态4.2、真正删除 PV4.3、查看PV PVC 状态…

PaLM-E: An Embodied Multimodal Language Model

发表时间:arXiv 6 Mar 2023 作者单位:Robotics at Google Motivation:大型语言模型已被证明可以执行复杂的任务。然而,在现实世界中启用一般推理,例如对于机器人问题,提出了落地的挑战。 解决方法&#…

探索全新AI编码代理框架:Agent Zero

引言 在科技的不断进步中,人工智能(AI)正越来越多地融入我们的日常生活。今天,我要为大家介绍一款全新的AI编码代理框架——Agent Zero。这款框架不仅可以自动化处理编码任务,还能操作文本、应用程序前端等&#xff0…

【微信小程序】页面导航和导航传参

什么是页面导航 小程序中实现页面导航的两种方式 1.声明式导航 (1). 导航到 tabBar 页面 (2). 导航到非 tabBar 页面 (3).后退导航 2.编程式导航 (1).导航到 tabBar 页面 示例代码如下: (2).导航到非 tabBar 页面 示例代码如下: (3).后退导航 示例…

WSL2Linux 子系统(十)

WSL 中启用图形界面 上一篇文章 《WSL2Linux 子系统(九)》 讲解详细讲 WSL(Windows Subsystem for Linux)解几种常见硬盘挂载方法。本篇讲述 WSL 显示画面的几种方法。WSL 本身不直接支持图形界面,在 WSL 环境中播放视频画面需要额外处理或者…

进程的执行和进程的结束

exec函数族: 作用:可以在一个程序中启动另外一个功能,用新的进程段替换当前进程的段. exec函数族用于替换当前进程的映像,允许程序在运行时加载并执行新的程序代码。 execl: l:list path:要执行的文件的路径 arg:要执行的文件的参数&a…

C#利用ffmpeg和opencv进行视频的解码播放

目录 说明 效果 项目 代码 下载 说明 利用周杰大佬的开源项目 Sdcb.FFmpeg 项目地址:https://github.com/sdcb/Sdcb.FFmpeg/ 效果 C#利用ffmpeg和opencv进行视频的解码播放 项目 代码 using OpenCvSharp; using Sdcb.FFmpeg.Codecs; using Sdcb.FFmpeg.F…

【SpringBoot】【autopoi】java生成word,基于模版生成(文本、图片、表格)

基于模版生成word 1、引入maven2、word模版编写3、java代码4、效果 AutoPoi的主要特点 参考文献 https://help.jeecg.com/autopoi/autopoi/prequel/test.html 1.设计精巧,使用简单 2.接口丰富,扩展简单 3.默认值多,write less do more 4.spring mvc支持,web导出可以简单明了 1、…

【大模型从入门到精通17】openAI API 构建和评估大型语言模型(LLM)应用5

这里写目录标题 理论问题:实践问题:理论实践 理论问题: 1.描述评估LLM应用程序输出的重要性,并提及至少三个维度,这些输出应该在这几个维度上被评估。 2.解释在评估LLM应用程序时开发稳健的性能指标的作用&#xff0c…