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

    简单描述一下业务场景方便理解:
    商品设置功能,支持添加多组商品(点击添加按钮进行增加).可以对任意商品进行删除(点击减少按钮对选中的商品设置进行删除).
在这里插入图片描述
问题:
    正常添加操作后,对已添加的任意商品删除后,控制台打印数组正常.但是与页面显示不一致.已上图为例,选中尾号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必须保证是唯一的,入页面所示显示的是时间戳.

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【Figma】中文版安装

一、软件安装包下载 打开官网链接https://www.figma.com/downloads/下载相应安装包 或使用我已下载好的链接&#xff1a; FigmaSetup.exe 链接: https://pan.baidu.com/s/113eQ8JRETdeOwUp2B3uieA?pwd4vep 二、安装流程 1.点击安装包 2.选择在浏览器登录 3.输入账号密码&a…

SpringBoot框架在宠物领养系统中的应用

摘 要 如今社会上各行各业&#xff0c;都在用属于自己专用的软件来进行工作&#xff0c;互联网发展到这个时候&#xff0c;人们已经发现离不开了互联网。互联网的发展&#xff0c;离不开一些新的技术&#xff0c;而新技术的产生往往是为了解决现有问题而产生的。针对于宠物领养…

SpringAi整合大模型(进阶版)

进阶版是在基础的对话版之上进行新增功能。 如果还没弄出基础版的&#xff0c;请参考 https://blog.csdn.net/weixin_54925172/article/details/144143523?sharetypeblogdetail&sharerId144143523&sharereferPC&sharesourceweixin_54925172&spm1011.2480.30…

redis快速进门

、数据库类型认识 关系型数据库 关系型数据库是一个结构化的数据库&#xff0c;创建在关系模型&#xff08;二维表格模型&#xff09;基础上&#xff0c;一般面向于记录。 SQL 语句&#xff08;标准数据查询语言&#xff09;就是一种基于关系型数据库的语言&#xff0c;用于执行…

爬虫笔记24——纷玩岛自动抢票脚本笔记

纷玩岛自动抢票&#xff0c;协议抢票思路实现 一、获取Authorization凭证二、几个关键的参数三、几个关键的接口获取参数v&#xff0c;这个参数其实可以写死&#xff0c;可忽略通过价位获取演出的参数信息获取观演人信息&#xff0c;账号提前录入即可提交订单接口 先看实现图&a…

Netty的心跳机制怎么实现的?

大家好&#xff0c;我是锋哥。今天分享关于【Netty的心跳机制怎么实现的&#xff1f;】面试题。希望对大家有帮助&#xff1b; Netty的心跳机制怎么实现的&#xff1f; 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 Netty 的心跳机制用于维持客户端和服务器之间的…

RHEL7+Oracle11.2 RAC集群-多路径(multipath+udev)安装步骤

RHEL7Oracle11.2RAC集群-多路径&#xff08;multipathudev&#xff09;安装 配置虚拟存储 使用StarWind Management Console软件&#xff0c;配置存储 dggrid1: 1g*3 Dggrid2: 1g*3 Dgsystem: 5g*1 系统表空间&#xff0c;临时表空间&#xff0c;UNDO&#xff0c;参数文件…

Sybase数据恢复—Sybase数据库无法启动,Sybase Central连接报错的处理案例

Sybase数据库数据恢复环境&#xff1a; Sybase数据库版本&#xff1a;SQL Anywhere 8.0。 Sybase数据库故障&分析&#xff1a; Sybase数据库无法启动。 错误提示&#xff1a; 使用Sybase Central连接报错。 数据库数据恢复工程师经过检测&#xff0c;发现Sybase数据库出现…

数学题转excel;数学题库;数学试卷转excel;大风车excel

一、数学试卷转excel 有些需要刷题的朋友&#xff0c;需要将题库数学题转为excel格式&#xff0c;便于管理 前端时间帮一位朋友实现了数学题转excel&#xff0c;包括选择题、填空题、分析题 示例&#xff1a; 二、问题 数学题是最难以处理的试题&#xff0c;理由如下 1、有…

开源项目:纯Python构建的中后台管理系统

来源&#xff1a;Python大数据分析 费弗里 大家好我是费老师&#xff0c;目前市面上有很多开源的「中后台管理系统」解决方案&#xff0c;复杂如「若依」那种前端基于Vue&#xff0c;后端基于Java的框架&#xff0c;虽然其提供了较为完善的一整套前后端分离权限管理系统解决方…

PS的功能学习

背景差色较大&#xff0c;就魔棒 魔棒的连续就是倒水点的跨越问题 魔棒的容差的选择就有点看经验了&#xff0c;看颜色的统一程度选择 Ctrl D 取消当前所有的选区 至于快速选择工具&#xff0c;和对象选择工具也差不多&#xff0c;只不过控制范围变成了一块一块的&#x…

linux一键部署apache脚本

分享一下自己制作的一键部署apache脚本&#xff1a; 脚本已和当前文章绑定&#xff0c;请移步下载&#xff08;免费&#xff01;免费&#xff01;免费&#xff01;&#xff09; &#xff08;单纯的分享&#xff01;&#xff09; 步骤&#xff1a; 将文件/内容上传到终端中 …

DataWhale—PumpkinBook(TASK07支持向量机)

课程开源地址及相关视频链接&#xff1a;&#xff08;当然这里也希望大家支持一下正版西瓜书和南瓜书图书&#xff0c;支持文睿、秦州等等致力于开源生态建设的大佬✿✿ヽ(▽)ノ✿&#xff09; Datawhale-学用 AI,从此开始 【吃瓜教程】《机器学习公式详解》&#xff08;南瓜…

排序算法之插入排序篇

插入排序 思路&#xff1a; 就是将没有排序的元素逐步地插入到已经排好序的元素后面&#xff0c;保持元素的有序 视频的实现过程如下&#xff1a; 插入排序全过程 代码实现过程如下&#xff1a; public static void Insertion(int[] arr) { for (int i 1; i < arr.length…

3DMAX星空图像生成器插件使用方法详解

3DMAX星空图像生成器插件&#xff0c;一键生成星空或夜空的二维图像。它可用于创建天空盒子或空间场景&#xff0c;或作为2D艺术的天空背景。 【主要特点】 -单击即可创建星空图像或夜空。 -星数、亮度、大小、形状等参数。 -支持任何图像大小&#xff08;方形&#xff09;。…

Flutter 权限申请

这篇文章是基于permission_handler 10.2.0版本写的 前言 在App开发过程中我们经常要用到各种权限&#xff0c;我是用的是permission_handler包来实现权限控制的。 pub地址&#xff1a;https://pub.dev/packages/permission_handler permission_handler 权限列表 变量 Androi…

前端学习笔记之FileReader

概念 FileReader接口允许网页应用程序异步读取用户计算机上存储的文件&#xff08;或原始数据缓冲区&#xff09;的内容&#xff0c;使用File或Blob对象来制定要读取的文件或数据。 File对象可以通过用户使用<input>元素选择文件后返回的FileList对象获得&#xff0c;或…

通过shell脚本分析部署nginx网络服务

要求 1.接收用户部署的服务名称 2.判断服务是否安装 已安装&#xff1b;自定义网站配置路径为/www&#xff1b;并创建共享目录和网页文件&#xff1b;重启服务 没有安装&#xff1b;安装对应的软件包 3.测试 判断服务是否成功运行&#xff1b; 已运行&#xff0c;访问网站…

Java基础——(三)对象和类

1. 面向对象程序设计概述 1.1 OOP OOP&#xff1a;Object Oriented Programming&#xff0c;面向对象编程&#xff1b;OOD&#xff1a;Object Oriented Design&#xff0c;面向对象设计&#xff1b;OOA&#xff1a;Object Oriented Analyse&#xff0c;面向对象分析。 面向对…

vue2日历组件

【效果图】 <template><div style"width: 100%"><!-- <div> --><!-- <div>{{ startDate.getMonth() 1 - startDate.getDate() }}</div><div>{{ endDate.getMonth() 1 - endDate.getDate() }}</div> --&g…