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

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

news 2025/7/2 21:26:54

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

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段： 构建阶段（Build Stage）&#xff1a…...

编程新知 2025/6/26 15:04:09

7.4.分块查找

一.分块查找的算法思想： 1.实例： 以上述图片的顺序表为例， 该顺序表的数据元素从整体来看是乱序的，但如果把这些数据元素分成一块一块的小区间， 第一个区间[0,1]索引上的数据元素都是小于等于10的， 第二…...

编程新知 2025/6/29 13:29:10

SciencePlots——绘制论文中的图片

文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了：一行…...

编程新知 2025/6/17 19:00:28

Linux相关概念和易错知识点（42）（TCP的连接管理、可靠性、面临复杂网络的处理）

目录 1.TCP的连接管理机制（1）三次握手①握手过程②对握手过程的理解 （2）四次挥手（3）握手和挥手的触发（4）状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...

编程新知 2025/6/22 6:45:56

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量，这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

编程新知 2025/7/2 12:14:36

LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf

FTP 客服管理系统 实现kefu123登录，不允许匿名访问，kefu只能访问/data/kefu目录，不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...

编程新知 2025/6/27 23:54:47

推荐 github 项目:GeminiImageApp(图片生成方向，可以做一定的素材)

推荐 github 项目:GeminiImageApp(图片生成方向，可以做一定的素材) 这个项目能干嘛? 使用 gemini 2.0 的 api 和 google 其他的 api 来做衍生处理 简化和优化了文生图和图生图的行为(我的最主要) 并且有一些目标检测和切割(我用不到) 视频和 imagefx 因为没 a…...

编程新知 2025/6/28 13:45:29

Python+ZeroMQ实战：智能车辆状态监控与模拟模式自动切换

目录 关键点 技术实现1 技术实现2 摘要： 本文将介绍如何利用Python和ZeroMQ消息队列构建一个智能车辆状态监控系统。系统能够根据时间策略自动切换驾驶模式（自动驾驶、人工驾驶、远程驾驶、主动安全），并通过实时消息推送更新车…...

编程新知 2025/6/21 10:34:52

Git 3天2K星标：Datawhale 的 Happy-LLM 项目介绍（附教程）

引言 在人工智能飞速发展的今天，大语言模型（Large Language Models, LLMs）已成为技术领域的焦点。从智能写作到代码生成，LLM 的应用场景不断扩展，深刻改变了我们的工作和生活方式。然而，理解这些模型的内部…...

编程新知 2025/6/25 3:30:33

libfmt: 现代C++的格式化工具库介绍与酷炫功能

libfmt: 现代C的格式化工具库介绍与酷炫功能 libfmt 是一个开源的C格式化库，提供了高效、安全的文本格式化功能，是C20中引入的std::format的基础实现。它比传统的printf和iostream更安全、更灵活、性能更好。 基本介绍 主要特点 类型安全&#xff1a…...

编程新知 2025/6/13 5:38:47