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

uniapp中父组件传参到子组件页面渲染不生效问题处理实战记录

news 2025/12/17 1:17:14

    上篇文件介绍了,父组件数据更新正常但是页面渲染不生效的问题,详情可以看下:uniapp中父组件数组更新后与页面渲染数组不一致实战记录
    本文在此基础上由于新增需求衍生出新的问题.本文只记录一下解决思路.
    下面说下新增需求方便理解场景:
商品信息设置中添加抽奖概率设置,默认概率相同,页面如下:在这里插入图片描述
    可以切换成自定义.显示概率输入框,页面如下:
在这里插入图片描述

    处理逻辑中给goodsList的每个详情中根据业务场景添加了对应属性:

"sameRate": 1, // 1.概率相同;2.自定义
"prizeRate": 0,  // sameRate为2时有效

    子组件中sameRate为1显示相同,sameRate为2时显示概率输入框.
    出现问题:
    显示设置radio切换逻辑中添加了goodsList中每个对象属性sameRate进行变更的处理逻辑.控制台发现goodsList数据变化显示正常.goodsList中每个对象属性sameRate会随着显示设置切换正常变化,统一为1或是统一为2.但是子组件显示的三个商品信息概率一栏中只会显示相同(sameRate为1),无法跟随显示设置动态变化.
    问题原因:
    这里涉及到父页面数据变换后如何让子组件重新渲染的问题,一般来讲父组件中数据变换通过props传递到子组件进行重新渲染.我这边出现问题的原因是子组件采用了自定义key.页面初始化后已经是固定值.vue中默认子组件中唯一key变化后才会重新渲染子组件.所以处理办法是在radio切换逻辑中变更goodsList中每个对象属性的key值.

相关文章：

uniapp中父组件传参到子组件页面渲染不生效问题处理实战记录

上篇文件介绍了,父组件数据更新正常但是页面渲染不生效的问题,详情可以看下:uniapp中父组件数组更新后与页面渲染数组不一致实战记录 本文在此基础上由于新增需求衍生出新的问题.本文只记录一下解决思路. 下面说下新增需求方便理解场景: 商品信息设置中添加抽奖概率设置…...

编程日记 2024/12/12 9:12:16

螺丝螺帽缺陷检测识别数据集，支持yolo，coco，voc三种格式的标记，一共3081张图片

螺丝螺帽缺陷检测识别数据集，支持yolo，coco，voc三种格式的标记，一共3081张图片 3081总图像数 数据集分割 训练组90％ 2781图片 有效集7% 220图片 测试集3% 80图片 预处理…...

编程日记 2024/12/12 9:11:14

一个简单带颜色的Map

越简单 越实用。越少设计，越易懂。 需求背景： 创建方法，声明一个hashset， 元素为 {“#DE3200”, “#FA8C00”, “#027B00”, “#27B600”, “#5EB600”} 。 对应的key为 key1 、key2、key3、key4、key5。 封装该方法&#xff0c…...

编程日记 2024/12/12 9:07:10

kubeadm安装K8s集群之基础环境配置

系列文章目录 1.kubeadm安装K8s集群之基础环境配置 2.kubeadm安装K8s集群之高可用组件keepalivednginx 3.kubeadm安装K8s集群之master节点加入 4.kubeadm安装K8s集群之worker1节点加入 kubeadm安装K8s集群基础环境配置 1.首先确保所有机器可以通信，然后配置主机host…...

编程日记 2024/12/12 9:06:09

前端实现在线预览excel文件

在前端开发中，经常会遇到需要在线预览各种文件的需求。本文将介绍如何使用前端技术实现在线预览 Excel 文件的功能。 一、基于微软office服务的excel预览 获取要预览的 Excel 文件的 URL（例如存储在 OneDrive 或 SharePoint 上的文件）。 使…...

编程日记 2024/12/12 8:58:01

关于idea-Java-servlet-Tomcat-Web开发中出现404NOT FOUND问题的解决

在做web项目时，第一次使用servlet开发链接前端和后端的操作，果不其然，遇到了诸多问题，而遇到最多的就是运行项目打开页面时出现404NOT FOUND的情况。因为这个问题我也是鼓捣了好久，上网查了许多资料才最终解决&#xf…...

编程日记 2024/12/12 8:55:59

SCRM私域流量管理工具助力企业微信电商转型升级

内容概要 在当今数字化时代，SCRM（社交客户关系管理）私域流量管理工具正逐渐成为企业转型的重要助力。尤其是在电商领域，企业微信的兴起为许多公司打开了新的销售渠道，通过SCRM系统的高效整合，企业能够更加…...

编程日记 2024/12/12 8:51:55

三相异步电动机为什么能够旋转？

三相异步电动机，作为一种广泛应用于工业、农业及其他领域的电动机，其工作原理的理解对于工程技术人员以及相关从业者来说至关重要。 一、三相异步电动机的基本结构 三相异步电动机主要由定子、转子和机壳组成。定子是电动机的静止部分，包含…...

编程日记 2024/12/12 8:50:54

优化移动端H5：常见问题与解决方案

移动端H5开发中的“坑”与解决方案 本文介绍了开发中遇到的几个关于移动端H5开发中的小问题，以及解决的方法。 一、iOS滑动不流畅问题 在iOS设备上，H5页面的滑动效果有时会出现不流畅的情况，特别是在页面高度超过一屏时。这通常是由于iOS的…...

编程日记 2024/12/12 8:46:51

TM1不藏私系列——#10. TM1快速运算的秘密武器-Feeder

与其他BI产品对比，TM1的快速运算能力一骑绝尘。 但是在多维度的数据组合下，TM1是依据什么进行运算的呢？ 今天将和大家一同了解TM1快速运算的秘密武器-Feeder。 上期我们提到通过配置维度中的元素权重，可以在合并层级加总计算。除…...

编程日记 2024/12/12 8:44:49

【Python】【Conda 】Conda vs venv：Python开发者的虚拟环境选择指南

目录 引言一、概述1.1 Conda 虚拟环境1.2 Python venv 虚拟环境 二、安装与设置2.1 安装 Conda 虚拟环境2.2 安装 Python venv 虚拟环境 三、依赖管理3.1 Conda 依赖管理3.2 Python venv 依赖管理 四、适用场景五、性能与资源占用5.1 Conda 性能与资源占用5.2 Python venv 性能…...

编程日记 2024/12/12 8:43:48

【从0学英语】06.时态 - 一般过去时

一般过去时（Past Simple Tense）是表达过去发生的动作、状态或事实的核心时态。这一时态都扮演着不可或缺的角色，本篇文章将全面讲解一般过去时的定义、结构、用法以及常见的动词变化，通过例句和详细的解释帮你理解这一时态。 文章…...

编程日记 2024/12/12 8:36:40

获取cpu序列号-python实现

DataBall 助力快速掌握数据集的信息和使用方式，会员享有 百种数据集，持续增加中。 需要更多数据资源和技术解决方案，知识星球： “DataBall - X 数据球(free)” -------------------------------------------------------------…...

编程日记 2024/12/12 8:35:39

文献分享: PLAID——为ColBERT架构设计的后期交互驱动器

👉前情提要： 神经网络自然语言模型概述 Transformer \text{Transformer} Transformer与注意力机制概述 📚相关论文： BERT: Pre-training of Deep Bidirectional Transformers for Language Understanding \text{BERT: Pre-train…...

编程日记 2024/12/12 8:33:37

IMX6ULL开发板、PC机上的USB网卡、VMware中的Ubuntu的桥接网卡三者互Ping设置及设置

连上PC机上的USB网卡配置 首先打开Windows设备管理器，截图记录下当前的网络适配器，作为插上USB网卡后的对比： 然后打开“更改适配器选项”，也截张图，作为插上USB网卡后的对比： 插上USB网口&#xff0…...

编程日记 2024/12/12 8:31:35

孚盟云 MailAjax.ashx SQL漏洞复现

0x01 产品描述： ‌孚盟云‌是由...

编程日记 2024/12/12 8:30:34

前端 mp4 视频改成 m3u8 流模式

前端 mp4 视频改成 m3u8 流模式 mp4 视频的问题 1、mp4 视频通常对应一个文件，播放时需要加载全部文件，消耗网络资源。如果用户从中间某个时间访问，也会从头开始下载，浪费服务器性能。 2、mp4 视频文件容易被用户下载到本地。有…...

编程日记 2024/12/12 8:29:33

聚焦港口智能接处警，开启平安海运之门

一、概述 港口作为海运的关键枢纽，安全保障至关重要。港口智能接处警系统凭借智能化、数字化、信息化手段，融合 AI 与大数据等前沿技术，旨在实现对港口各类警情的快速、精准处理，有效提升港口应急响应能力，开启平安海…...

编程日记 2024/12/12 8:28:32

`yarn list --pattern element-ui` 是一个 Yarn 命令，用于列出项目中符合指定模式（`element-ui`）的依赖包信息

文章目录 命令解析：功能说明：示例输出：使用场景： yarn list --pattern element-ui 是一个 Yarn 命令，用于列出项目中符合指定模式（ element-ui）的依赖包信息。 命令解析： yarn list…...

编程日记 2024/12/12 8:25:28

ElementEye，网页分析器

介绍 我们经常使用Python写爬虫，爬到网页数据之后，就需要用beautifulSoup进行解析。因为写爬虫并不是我的主营工作，大多数只是用来分析一下想要的数据而已，所以经常会忘记beautifulSoup的用法。 同时，我们总是分析页面…...

编程日记 2024/12/12 8:17:20

黑马Mybatis

Mybatis 表现层&#xff1a;页面展示 业务层&#xff1a;逻辑处理 持久层&#xff1a;持久数据化保存 在这里插入图片描述 Mybatis快速入门 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/6501c2109c4442118ceb6014725e48e4.png //logback.xml <?xml ver…...

编程新知 2025/12/14 13:08:55

【Linux】C语言执行shell指令

在C语言中执行Shell指令 在C语言中&#xff0c;有几种方法可以执行Shell指令&#xff1a; 1. 使用system()函数 这是最简单的方法&#xff0c;包含在stdlib.h头文件中&#xff1a; #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...

编程新知 2025/11/20 18:42:48

ESP32 I2S音频总线学习笔记（四）： INMP441采集音频并实时播放

简介 前面两期文章我们介绍了I2S的读取和写入&#xff0c;一个是通过INMP441麦克风模块采集音频&#xff0c;一个是通过PCM5102A模块播放音频&#xff0c;那如果我们将两者结合起来&#xff0c;将麦克风采集到的音频通过PCM5102A播放&#xff0c;是不是就可以做一个扩音器了呢…...

编程新知 2025/12/16 9:28:58

Springcloud：Eureka 高可用集群搭建实战（服务注册与发现的底层原理与避坑指南）

引言&#xff1a;为什么 Eureka 依然是存量系统的核心&#xff1f; 尽管 Nacos 等新注册中心崛起&#xff0c;但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制&#xff0c;是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

编程新知 2025/12/10 4:51:15

Java入门学习详细版（一）

大家好&#xff0c;Java 学习是一个系统学习的过程&#xff0c;核心原则就是“理论 实践 坚持”&#xff0c;并且需循序渐进&#xff0c;不可过于着急&#xff0c;本篇文章推出的这份详细入门学习资料将带大家从零基础开始&#xff0c;逐步掌握 Java 的核心概念和编程技能。 …...

编程新知 2025/12/14 14:47:02

【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习

禁止商业或二改转载&#xff0c;仅供自学使用&#xff0c;侵权必究&#xff0c;如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...

编程新知 2025/12/9 10:21:27

嵌入式学习笔记DAY33（网络编程——TCP）

一、网络架构 C/S &#xff08;client/server 客户端/服务器&#xff09;&#xff1a;由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序&#xff0c;负责提供用户界面和交互逻辑 &#xff0c;接收用户输入&#xff0c;向服务器发送请求&#xff0c;并展示服务…...

编程新知 2025/12/16 18:27:37

Golang——6、指针和结构体

指针和结构体 1、指针1.1、指针地址和指针类型1.2、指针取值1.3、new和make 2、结构体2.1、type关键字的使用2.2、结构体的定义和初始化2.3、结构体方法和接收者2.4、给任意类型添加方法2.5、结构体的匿名字段2.6、嵌套结构体2.7、嵌套匿名结构体2.8、结构体的继承 3、结构体与…...

编程新知 2025/11/29 18:37:21

协议转换利器，profinet转ethercat网关的两大派系，各有千秋

随着工业以太网的发展&#xff0c;其高效、便捷、协议开放、易于冗余等诸多优点&#xff0c;被越来越多的工业现场所采用。西门子SIMATIC S7-1200/1500系列PLC集成有Profinet接口&#xff0c;具有实时性、开放性&#xff0c;使用TCP/IP和IT标准&#xff0c;符合基于工业以太网的…...

编程新知 2025/12/14 19:01:59

云原生安全实战：API网关Envoy的鉴权与限流详解

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关 作为微服务架构的统一入口&#xff0c;负责路由转发、安全控制、流量管理等核心功能。 2. Envoy 由Lyft开源的高性能云原生…...

编程新知 2025/12/15 1:08:55