uniapp中父组件数组更新后与页面渲染数组不一致实战记录

news2025/2/11 15:16:00

    简单描述一下业务场景方便理解:
    商品设置功能,支持添加多组商品(点击添加按钮进行增加).可以对任意商品进行删除(点击减少按钮对选中的商品设置进行删除).
在这里插入图片描述
问题:
    正常添加操作后,对已添加的任意商品删除后,控制台打印数组正常.但是与页面显示不一致.已上图为例,选中尾号2885进行删除,控制台商品数组显示正常,存在尾号6719和尾号7040的商品.但是页面显示还是尾号2885和尾号6719商品信息.尾号7040的商品不显示.
    多次测试发现不论选中哪个商品设置,控制台打印的数组与预期删除的一致,但是页面始终是最后一个尾号7040的商品不显示.
这里尝试过很多办法,最终出现问题是在v-for循环中的key,修改之前的父组件:

<goods_settting v-for="(goodsItem,index) in goodsList" :key="index"
</goods_settting >

    造成上述问题的原因是在删除数组中指定元素后对数组进行重新赋值,key存在重复的情况导致渲染异常.
修改后:

<goods_settting v-for="(goodsItem,index) in goodsList" :key="goodsItem.goodsId"
</goods_settting >

    这里的goodsItem.goodsId必须保证是唯一的,入页面所示显示的是时间戳.

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

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

相关文章

【Git系列】利用 Bash 脚本获取 Git 最后一次非合并提交的提交人

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

hadoop环境配置-vm安装+麒麟ubantu

一.VM版本 选择16版本&#xff0c;15版本存在windows蓝屏的情况&#xff0c;也不用设置HV等相关设置 激活下载参考下述博客&#xff1a;https://blog.csdn.net/matrixlzp/article/details/140674802 提前在bois打开SVM设置&#xff0c;不设置无法打开新建的虚拟机 ubantu下载…

基于SpringBoot的电脑配件销售系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码 精品专栏&#xff1a;…

【linux学习指南】详解Linux进程信号保存

文章目录 &#x1f4dd;保存信号&#x1f320; 信号其他相关常⻅概念&#x1f309;在内核中的表⽰ &#x1f320; sigset_t&#x1f320;信号集操作函数&#x1f309;sigprocmask&#x1f309;sigpending &#x1f6a9;总结 &#x1f4dd;保存信号 &#x1f320; 信号其他相关常…

[在线实验]-Redis Docker镜像的下载与部署

镜像下载 dockerredis镜像资源-CSDN文库 加载镜像 使用以下命令从redis.tar文件中加载Docker镜像 docker load --input redis.tar 创建映射目录 为了确保Redis的数据能够持久化&#xff0c;我们需要创建一个本地目录来存储这些数据 mkdir -p datasource/docker/redis 运…

嵌入式QT学习第4天:Qt 信号与槽

Linux版本号4.1.15 芯片I.MX6ULL 大叔学Linux 品人间百味 思文短情长 本章思维导图如下&#xff1a; 不使用 Qt Designer 的方式进行开发&#xff0c;用代码绘界面&#xff0c;可以锻炼我们的布局能力&#xff0c;和代码逻辑能力&#x…

【设计模式系列】解释器模式(十七)

一、什么是解释器模式 解释器模式&#xff08;Interpreter Pattern&#xff09;是一种行为型设计模式&#xff0c;它的核心思想是分离实现与解释执行。它用于定义语言的文法规则&#xff0c;并解释执行语言中的表达式。这种模式通常是将每个表达式抽象成一个类&#xff0c;并通…

在开发环境中,前端(手机端),后端(电脑端),那么应该如何设置iisExpress

首先&#xff0c;要想手机端应用能成功请求后端&#xff0c;两个设备至少需在同一个局域网内&#xff0c;且IP地址互通&#xff1b; 因为ajax是http(s)://IP地址端口号的方式请求&#xff0c;但是iisExpress默认是localhost如何解决&#xff0c;并没有IP地址&#xff0c;所以手…

行业分析---2024年蔚来汽车三季度财报及科技日

1 前言 在之前的博客中&#xff0c;笔者撰写了多篇行业类分析的文章&#xff08;科技新能源&#xff09;&#xff1a; 《行业分析---我眼中的Apple Inc.》 《行业分析---马斯克的Tesla》 《行业分析---造车新势力之蔚来汽车》 《行业分析---造车新势力之小鹏汽车》 《行业分析-…

物联网射频识别和RFID开发(一):RFID基础—概念、应用

一、RFID的发展历史 二、RFID与物联网 &#xff08;一&#xff09;物联网与RFID的关系 物联网的基本思想是美国麻省理工学院在1999年提出的&#xff0c;其核心思想是为全球每个物品提供唯一的电子标识符。这种电子标识符就是现在经常提到的“电子产品编码(Electronic Product …

IPGuard与Ping32结合,提供企业级数据加密与防泄密解决方案,全面保障敏感数据安全

随着数字化转型的深入推进&#xff0c;企业面临着日益复杂的安全挑战。如何在确保数据流通的同时&#xff0c;保障企业的核心资产不被泄露&#xff0c;是每个企业必须面对的难题。为此&#xff0c;Ping32与IPGuard联合推出了一套全面的企业级数据加密与防泄密解决方案&#xff…

flink学习(8)——窗口函数

增量聚合函数 ——指窗口每进入一条数据就计算一次 例如&#xff1a;要计算数字之和&#xff0c;进去一个12 计算结果为20&#xff0c; 再进入一个7 ——结果为27 reduce aggregate(aggregateFunction) package com.bigdata.day04;public class _04_agg函数 {public static …

智能桥梁安全运行监测系统守护桥梁安全卫士

一、方案背景 桥梁作为交通基础设施中不可或缺的重要组成部分&#xff0c;其安全稳定的运行直接关联到广大人民群众的生命财产安全以及整个社会的稳定与和谐。桥梁不仅是连接两地的通道&#xff0c;更是经济发展和社会进步的重要纽带。为了确保桥梁的安全运行&#xff0c;桥梁安…

网络原理-初识

1.网络的发展历程 独立模式 独立模式&#xff1a;计算机之间相互独立。 每个终端A、B、C各自持有客户端数据 网络互连 随着时代的发展&#xff0c;越来越需要计算机之间互相通信&#xff0c;共享软件和数据&#xff0c;即可以多个计算机协调工作来完成业务&#xff0c;就有…

房屋结构安全监测系统守护房屋安全卫士

一、系统背景 随着时间的流逝&#xff0c;建筑物的主体结构、设备设施等会因为自然老化、材料疲劳、使用环境的变化以及维护不当等各种因素的影响&#xff0c;逐渐出现性能下降甚至安全隐患。因此&#xff0c;进行房屋安全监测显得尤为重要。房屋结构安全是指建筑物的结构体系在…

排序算法之选择排序堆排序

算法时间复杂度辅助空间复杂度稳定性选择排序O(N^2)O(1)不稳定堆排序O(NlogN)O(1)不稳定 1.选择排序 这应该算是最简单的排序算法了&#xff0c;每次在右边无序区里选最小值&#xff0c;没有无序区时&#xff0c;就宣告排序完毕 比如有一个数组&#xff1a;[2,3,2,6,5,1,4]排…

从0开始linux(39)——线程(2)线程控制

欢迎来到博主的专栏&#xff1a;从0开始linux 博主ID&#xff1a;代码小豪 文章目录 线程创建线程标识符线程参数多线程竞争资源 回收线程detach 线程退出pthread_cancel 线程创建 线程创建的函数为pthread_create。该函数是包含在posix线程库当中&#xff0c;posix线程是C语言…

28.100ASK_T113-PRO Linux+QT 显示一张照片

1.添加资源文件 2. 主要代码 #include "mainwindow.h" #include "ui_mainwindow.h" #include <QImage> #include <QPixmap>MainWindow::MainWindow(QWidget *parent) :QMainWindow(parent),ui(new Ui::MainWindow) {ui->setupUi(this);QIm…

不用下载安装的线上3D编辑器,支持哪些功能?

线上3D编辑器&#xff0c;不用下载软件&#xff0c;直接通过浏览器打开51建模网&#xff0c;上传模型即可进入编辑器&#xff0c;不仅支持对3D模型进行细致的效果配置&#xff0c;如光源设置、背景定制、材质调节等&#xff0c;还具备爆炸效果、热点动画、部件替换等高级交互功…

C语言——指针初阶(三)

目录 一.指针-指针 代码1&#xff1a; 运行结果&#xff1a; 代码2&#xff1a; 运行结果&#xff1a; 代码3&#xff1a; 运行结果&#xff1a; 二.指针数组 例&#xff1a; 往期回顾 一.指针-指针 指针减去指针的前提&#xff1a;两个指针指向同一块空间。 指针减去指针…