vue中v-for循环数组使用方法中splice删除数组元素(每次都删掉点击的下面的一项)

总结:平常使用v-for的key都是使用index,这里vue官方文档也不推荐,这个时候就出问题了,我们需要key为唯一标识,这里我使用了时间戳(new Date().getTime())处理比较复杂的情况,
本文章参考 链接: https://www.jb51.net/javascript/29041834i.htm
效果图:
在这里插入图片描述

在这里插入图片描述

<el-form-item label="资源列表:"><div class="ziyuan" flex v-for="(item, indexes) in  addList " :key="item.idxxx"><div style="margin-top: 9px;"><el-upload :action="domins + '/common/upload'":class="{ disabled: item.uploadDisabled }" list-type="picture-card":before-upload="beforeUploadOne" :on-preview="handlePictureCardPreview":on-remove="handleRemove.bind(null, { 'index': indexes, 'data': item })":on-success="handleAvatarSuccess.bind(null, { 'index': indexes, 'data': item })":on-change="handleChange.bind(null, { 'index': indexes, 'data': item })":file-list="item.fileList" accept="image/png, image/jpeg"><i class="el-icon-plus"></i></el-upload><el-dialog :visible.sync="dialogVisible"><img width="100%" :src="item.dialogImageUrl" alt=""></el-dialog></div><div class="yasuo" flex="cross:center"><div><div style="height: 68px;"><el-upload ref="uploadzip" :action="domins + '/common/upload'":on-remove="handleRemoveZip":on-success="handleAvatarSuccessZip.bind(null, { 'index': indexes, 'data': item })":on-change="handleChangeZip" :file-list="item.fileListZip":auto-upload="true" accept=".zip,.rar,.ab" :limit="1"><el-button size="small" type="primary">选择压缩包</el-button></el-upload></div><div class="banben" v-show="addmu == 1 || jzyFlag == 2">版本号{{item.versions ? item.versions : '1.0.0' }}</div></div></div><div class="airadio"><el-radio-group v-model="item.way"><el-radio :label="0">Android</el-radio><el-radio :label="1">ios</el-radio></el-radio-group></div><div style="margin-top: 11px;"><i class="el-icon-circle-plus-outline" style="color: #264E71;"@click="plusOne(indexes)"></i><i class="el-icon-remove-outline" style="color: #264E71;" v-show="addList.length > 1"@click="removeOne(indexes, item.id, item)"></i></div></div></el-form-item>
//再后面添加一项,idxxx作为唯一标识,因为需求原因 在没添加时间戳之前是没有唯一标识的plusOne() {this.addList.push({id: 0,uploadDisabled: false,album: '',zip: '',way: 0,idxxx: new Date().getTime()})},removeOne(index, id, item) {//使用唯一标识删除this.addList = [...this.addList.filter(e => e.idxxx !== item.idxxx)]},

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2020年12月 C/C++(一级)真题解析#中国电子学会#全国青少年软件编程等级考试

C/C编程&#xff08;1~8级&#xff09;全部真题・点这里 第1题&#xff1a;字符三角形 描述 给定一个字符&#xff0c;用它构造一个底边长5个字符&#xff0c;高3个字符的等腰字符三角形。 输入 输入只有一行&#xff0c; 包含一个字符。 输出 该字符构成的等腰三角形&#xff…

C++ - 多态的实现原理

前言 本博客主要介绍C 当中 多态语法的实现原理&#xff0c;如果有对 多态语法 有疑问的&#xff0c;请看下面这篇博客&#xff1a; C - 多态语法 - 虚函数使用介绍-CSDN博客 探究&#xff0c;为什么多态的条件是那样的&#xff08;虚函数表&#xff09; 首先&#xff0c;调用…

qt day6 人脸识别

在C和C中static关键字的用法 static修饰局部变量、全局变量&#xff08;不能被外部引用extern|未初始化的值为0&#xff09;、函数&#xff08;不能被外部引用extern&#xff09;&#xff0c;不能修饰auto类型的指针&#xff08;因为计算机先为静态变量分配空间&#xff0c;后再…

重磅|Falcon 180B 正式在 Hugging Face Hub 上发布!

引言 我们很高兴地宣布由 Technology Innovation Institute (TII) 训练的开源大模型 Falcon 180B 登陆 Hugging Face&#xff01;Falcon 180B 为开源大模型树立了全新的标杆。作为当前最大的开源大模型&#xff0c;有180B 参数并且是在在 3.5 万亿 token 的 TII RefinedWeb 数据…

打造基于终端命令行的IDE,Termux配置Vim C++开发环境

Termux配置Vim C开发环境&#xff0c;打造基于终端命令行的IDE 主要利用VimCoc插件&#xff0c;配置C的代码提示等功能。 Termux换源 打开termux&#xff0c;输入termux-change-repo 找到mirrors.tuna.tsinghua.edu.cn&#xff0c;清华源&#xff0c;空格选中&#xff0c;回…

Hadoop Hive入门

0目录 1.linux 安装hive 2.hive入门 3.hive高级语法1 1.linux 安装hive 先确保linux虚拟机中已经安装jdk&#xff1b;mysql和hadoop 并可以成功启动hadoop和mysql 下载hive对应版本到opt/install目录下并解压到opt/soft目录下 重命名 hive312 配置profile 文件&#xff…

Qt+C++桌面计算器源码

程序示例精选 QtC桌面计算器源码 如需安装运行环境或远程调试&#xff0c;见文章底部个人QQ名片&#xff0c;由专业技术人员远程协助&#xff01; 前言 这篇博客针对<<QtC桌面计算器源码>>编写代码&#xff0c;代码整洁&#xff0c;规则&#xff0c;易读。 学习与…

Hadoop的第二个核心组件:MapReduce框架第二节

Hadoop的第二个核心组件&#xff1a;MapReduce框架第二节 六、MapReduce的工作流程原理&#xff08;简单版本&#xff09;七、MapReduce中的序列化机制问题八、流量统计案例实现&#xff08;序列化机制的实现&#xff09; 六、MapReduce的工作流程原理&#xff08;简单版本&…

Flutter实用工具Indexer列表索引和Search搜索帮助。

1.列表索引 效果图&#xff1a; indexer.dart import package:json_annotation/json_annotation.dart;abstract class Indexer {///用于排序的字母JsonKey(includeFromJson: false, includeToJson: false)String? sortLetter;///用于排序的拼音JsonKey(includeFromJson: fal…

如何有效防止服务器被攻击?

随着互联网的快速发展&#xff0c;服务器安全问题日益引起人们的关注。近期&#xff0c;全球范围内频繁发生的服务器攻击事件引发了广泛关注。为了保护企业和个人的数据安全&#xff0c;有效防止服务器被攻击已成为迫在眉睫的任务。 首先&#xff0c;及时更新服务器的操作系统和…

基于SpringBoot的医院挂号系统

基于SpringBootVue的医院挂号、预约、问诊管理系统&#xff0c;前后端分离 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringBoot、Vue、Mybaits Plus、ELementUI工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 角色&#xff1a;管理员、用户、医生 管…

系统架构技能之设计模式-组合模式

一、上篇回顾 我们上篇主要讲述了结构型模式中的外观模式&#xff0c;外观模式作为结构型模式中的一个简单又实用的模式&#xff0c;外观模式通过封装细节来提供大粒度的调用&#xff0c; 直接的好处就是&#xff0c;封装细节&#xff0c;提供了应用写程序的可维护性和易用性。…

十二、集合(4)

本章概要 集合 Set映射 Map队列 Queue 优先级队列 PriorityQueue 集合与迭代器 集合Set Set 不保存重复的元素。 如果试图将相同对象的多个实例添加到 Set 中&#xff0c;那么它会阻止这种重复行为。 Set 最常见的用途是测试归属性&#xff0c;可以很轻松地询问某个对象是否…

命名空间的详讲

本篇文章旨在讲解C中命名空间的概念以及其相关注意事项&#xff01; C的介绍 C作为C语言的衍生&#xff0c;其对C语言中的一些缺陷进行了一些的补充和优化。但是C也对C语言具有兼容性&#xff01; 本文旨在讲解C对C语言中当声明的变量与库函数的一些标识符&#xff0c;关键字…

【数论】容斥问题教程+符号含义+公式(c++)

容斥问题是什么 比如我们平常考试&#xff0c;我们会统计有几个语文及格&#xff0c;有几个数学及格&#xff0c;比如5个语文及格&#xff0c;2个数学及格&#xff0c;当然了&#xff0c;也会有大学霸两科都及格&#xff0c;比如1个人语文数学都及格&#xff0c;那我们班上一共…

Hadoop的第二个核心组件:MapReduce框架第四节

Hadoop的第二个核心组件&#xff1a;MapReduce框架 十、MapReduce的特殊应用场景1、使用MapReduce进行join操作2、使用MapReduce的计数器3、MapReduce做数据清洗 十一、MapReduce的工作流程&#xff1a;详细的工作流程第一步&#xff1a;提交MR作业资源第二步&#xff1a;运行M…

vnc与windows之间的复制粘贴

【原创】VNC怎么和宿主机共享粘贴板 假设目标主机是linux&#xff0c;终端主机是windows&#xff08;就是在windows上使用VNC登陆linux&#xff09; 在linux中执行 vncconfig -nowin& 在linux选中文字后&#xff0c;无需其他按键&#xff0c;直接在windows中可以黏贴。 …

【C++基础】5. 变量作用域

文章目录 【 1. 局部变量 】【 2. 全局变量 】【 3. 局部变量和全局变量的初始化 】 作用域是程序的一个区域&#xff0c;一般来说有三个地方可以定义变量&#xff1a; 在函数或一个代码块内部声明的变量&#xff0c;称为局部变量。 在函数参数的定义中声明的变量&#xff0c;称…

【前端demo】圣诞节灯泡 CSS动画实现轮流闪灯

文章目录 效果过程灯泡闪亮实现&#xff08;animation和box-shadow&#xff09;控制灯泡闪亮时间和顺序&#xff08;animation-delay&#xff09;按钮开关 代码htmlcssjs 参考代码1代码2 前端demo目录 效果 效果预览&#xff1a;https://codepen.io/karshey/pen/zYyBRWZ 参考…

Vue + Element UI 前端篇(十二):用户管理模块

Vue Element UI 实现权限管理系统 前端篇&#xff08;十二&#xff09;&#xff1a;用户管理模块 用户管理模块 添加接口 在 http/moduls/user.js 中添加用户管理相关接口。 import axios from ../axios/* * 用户管理模块*/// 保存 export const save (params) > {ret…