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

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

news 2026/2/3 22:20:22

    上篇文件介绍了,父组件数据更新正常但是页面渲染不生效的问题,详情可以看下: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

React第五十七节 Router中RouterProvider使用详解及注意事项

前言 在 React Router v6.4 中&#xff0c;RouterProvider 是一个核心组件&#xff0c;用于提供基于数据路由&#xff08;data routers&#xff09;的新型路由方案。 它替代了传统的 <BrowserRouter>&#xff0c;支持更强大的数据加载和操作功能&#xff08;如 loader 和…...

编程新知 2026/1/21 9:06:43

中南大学无人机智能体的全面评估！BEDI：用于评估无人机上具身智能体的综合性基准测试

作者&#xff1a;Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位&#xff1a;中南大学地球科学与信息物理学院论文标题&#xff1a;BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接&#xff1a;https://arxiv.…...

编程新知 2026/1/22 15:36:10

汽车生产虚拟实训中的技能提升与生产优化​

在制造业蓬勃发展的大背景下&#xff0c;虚拟教学实训宛如一颗璀璨的新星&#xff0c;正发挥着不可或缺且日益凸显的关键作用&#xff0c;源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例&#xff0c;汽车生产线上各类…...

编程新知 2026/1/27 7:46:36

Android 之 kotlin 语言学习笔记三（Kotlin-Java 互操作）

参考官方文档&#xff1a;https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java&#xff08;供 Kotlin 使用&#xff09; 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...

编程新知 2026/2/2 7:33:05

精益数据分析（97/126）：邮件营销与用户参与度的关键指标优化指南

精益数据分析&#xff08;97/126&#xff09;&#xff1a;邮件营销与用户参与度的关键指标优化指南 在数字化营销时代&#xff0c;邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天&#xff0c;我们将深入解析邮件打开率、网站可用性、页面参与时…...

编程新知 2025/12/13 4:04:33

ip子接口配置及删除

配置永久生效的子接口&#xff0c;2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...

编程新知 2025/10/26 5:04:25

Java + Spring Boot + Mybatis 实现批量插入

在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法&#xff1a;使用 MyBatis 的 <foreach> 标签和批处理模式&#xff08;ExecutorType.BATCH&#xff09;。 方法一&#xff1a;使用 XML 的 <foreach> 标签&#xff…...

编程新知 2025/6/11 2:44:05

掌握 HTTP 请求：理解 cURL GET 语法

cURL 是一个强大的命令行工具&#xff0c;用于发送 HTTP 请求和与 Web 服务器交互。在 Web 开发和测试中&#xff0c;cURL 经常用于发送 GET 请求来获取服务器资源。本文将详细介绍 cURL GET 请求的语法和使用方法。 一、cURL 基本概念 cURL 是 "Client URL" 的缩写…...

编程新知 2025/7/9 20:52:19

git: early EOF

macOS报错&#xff1a; Initialized empty Git repository in /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core/.git/ remote: Enumerating objects: 2691797, done. remote: Counting objects: 100% (1760/1760), done. remote: Compressing objects: 100% (636/636…...

编程新知 2025/10/12 2:03:36

webpack面试题

面试题&#xff1a;webpack介绍和简单使用 一、webpack&#xff08;模块化打包工具&#xff09;1. webpack是把项目当作一个整体&#xff0c;通过给定的一个主文件&#xff0c;webpack将从这个主文件开始找到你项目当中的所有依赖文件&#xff0c;使用loaders来处理它们&#x…...

编程新知 2025/10/19 1:38:36