【uniapp】渲染列表数据删除项导致每项数据重置的问题解决方案

news2024/10/6 0:33:38

开发uniapp项目,使用的是JavaScript Vue写法,操作wList数组列表更新的时候,如果每一项都带input 或 radio组件,要操作移除的话,那么组件的输入数据会被清除重置,若不希望这样,那应该怎么做才好呢

问题呈现

如果不想列表项临时输入数据被清除刷新,用以下三个方法,是要不得哦

删除第一项

this.wList.shift();

删除某一项

this.wList.splice(index,1);

删除最后一项

this.wList.pop();

列表页面是下面的写法,会导致问题出现,操作数组会遇到渲染数据重置问题,项目使用的是vue框架,也就是说vue的渲染逻辑问题

<view class="item" v-for="(item,index) in vList" :key="index" v-if="item">
	<view>
		<!-- 列表项 -->
	</view>
</view>

研究问题

从vue的文档中了解到,使用v-if=""会重新渲染,而用v-show=""就不会,会显示和隐藏,

进一步发现,在渲染列表中,每个项都处在同一层,如果发现移除同层的其中一个DOM元素,是会重新渲染的,渲染后临时数据就没了

<view class="item" v-for="(item,index) in vList" :key="index" v-if="item">
	<view>
		<!-- 列表项 -->
	</view>
</view>

解决问题

发现一个规律,想到一个变通方法,将可移除的元素放在一个盒子中,不过,这个盒子不要移除,只显示和隐藏,某项不需要时就从盒子中移除元素就可以了

<view class="box" v-for="(item,index) in vList" :key="index" v-show="item">
	<view class="item" v-if="item">
		<!-- 列表项 -->
	</view>
</view>

然后,删除某项的处理方法,只需要这样做

this.wList.splice(index,1,false);

这样做是不是有点那个,真的删除吗?
显示列表的时候,给每个项加个过滤判断吧,目前只能这样=.=

就讲到这里,问题是解决了吧,可自行测试。

请添加图片描述

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

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

相关文章

设计模式相关内容介绍—软件设计原则(六个)

在软件开发中&#xff0c;为了提高软件系统的可维护性和可复用性&#xff0c;增加软件的可扩展性和灵活性&#xff0c;程员要尽量根据6条原则来开发程序&#xff0c;从而提高软件开发效率、节约软件开发成本和维护成本。 目录 1.开闭原则 2.里氏代替原则 3.依赖倒转原则 4.接…

dvwa中的文件包含攻击

环境&#xff1a;dvwa: 192.168.11.135 dvwa版本&#xff1a; Version 1.9 (Release date: 2015-09-19)kail机器&#xff1a;192.168.11.156一、什么是文件包含漏洞?为简化代码&#xff0c;会把重复的code内容单独写到一个页面文件&#xff0c;然后再需要调用重复内容的页面中…

C语言:初识C语言

目录前言1. 什么是c语言呢2. 第一个c语言程序2. 数据类型3. 变量和常量3.1 变量3.1.1 变量的定义3.1.2 变量的分类3.1.3 变量的使用3.1.4 变量的作用域和生命周期3.2 常量4. 字符串、转义字符、注释4.1 字符串4.2 转义字符4.3 注释5. 选择语句6. 循环语句7. 函数8. 数组9. 操作…

学习笔记——keep-alive缓存组件,再次返回组件data数据重置

前言&#xff1a;使用keep-alive缓存组件&#xff0c;当再次返回该组件后&#xff0c;希望其组件中的数据或状态&#xff0c;保持上次离开该组件时的情况。 一、当前组件树 希望缓存HomeMain组件的状态。 二、错误处理 我在HomeMain的祖先组件HomeLayout中&#xff0c;写了如下…

sqlplus 连接数据库

终端直连 Oracle 数据库 ORA-12162 错误 出于各种网络原因&#xff0c;无法直连数据库&#xff0c;但又必须查询数据库数据 我们只能选择直连数据库的服务器 然后通过 sqlplus 连接 Oracle 从配置文件里获取这样一段信息 urljdbc:oracle:thin:192.168.1.3:1521:testdb use…

【SpringCloud08】SpringCloud Consul服务注册与发现

1.Consul简介 1.1是什么 官网 Consul 是一套开源的分布式服务发现和配置管理系统&#xff0c;由 HashiCorp 公司用Go 语言开发 提供了微服务系统中的服务治理、配置中心、控制总线等功能。这些功能中的每一个都可以根据需要单独使用&#xff0c;也可以一起使用以构建全方位…

基于MPLS-V**多分部互访的ensp企业网络规划与设计_ensp综合实验

作者&#xff1a;BSXY_19计科_陈永跃BSXY_信息学院注&#xff1a;未经允许禁止转发任何内容基于MPLS-V**多分部互访的ensp企业网络规划与设计_ensp综合实验前言及技术/资源下载说明&#xff08; **未经允许禁止转发任何内容** &#xff09;插曲&#xff1a;基于eNSP中大型校园/…

卡特加特数字中控主机,数字家庭控制中心!没它智能家居就是智障!

数字中控主机是数字家庭的核心&#xff0c;承担着“协调各方、总揽全局”的作用&#xff0c;是打造未来数字家庭空间必不可少的设备。区别于传统家居智能&#xff0c;它真正意义上告别了过去以设备为中心的架构&#xff0c;而是以人的个性化需求为中心&#xff0c;以数据作为资…

2020统考真题-距离最小三元组

2020年统考真题 定义三元组$ (a,b,c)$ &#xff08; a,b,c 均为正数&#xff09;的距离 D∣a−b∣∣b−c∣∣c−a∣D|a−b||b−c||c−a|D∣a−b∣∣b−c∣∣c−a∣ 。给定 3个非空整数集合 S1 、 S2 和 S3 &#xff0c;按升序分别存储在 3 个数组中。请设计一个尽可能高效的算…

蓝队攻击的四个阶段(三)

目录 一&#xff0c; 专业技能储备 1.工具开发技能 2.漏洞挖掘技能 3.代码调试技能 4.侦破拓展技能 二&#xff0c;目标网情搜集 1 何为网情搜集 2. 网情搜集的主要工作 三&#xff0c; 网情搜集的途径 1.专业网站 2.专业开发资源网站 3.目标官网 一&#xff0c; 专…

算法训练营 day17 二叉树 平衡二叉树 二叉树的所以路径 左叶子之和

算法训练营 day17 二叉树 平衡二叉树 二叉树的所以路径 左叶子之和 平衡二叉树 110. 平衡二叉树 - 力扣&#xff08;LeetCode&#xff09; 给定一个二叉树&#xff0c;判断它是否是高度平衡的二叉树。 本题中&#xff0c;一棵高度平衡二叉树定义为&#xff1a; 一个二叉树每…

osg fbo(五) 通过shader计算纹理坐标并采样

在前边几节&#xff0c;纹理坐标数组是在生成geometry前指定的。 这里在shader里计算&#xff0c; 一&#xff0c;注释掉geometry中的纹理坐标 //osg::ref_ptr<osg::Vec2Array> texCoord new osg::Vec2Array; //texCoord->push_back(osg::Vec2(0.0, 0.0)); //texCoo…

1.13UART串口实验

UART总线&#xff1a; 异步全双工串行总线。用于芯片与外设之间的通信 UART通信协议&#xff1a; 空闲状态处于高电平 起始位&#xff1a;串口通信的起始标志 数据位&#xff1a;传输数据时先从低位开始传输&#xff0c;再传输高位 奇偶校验位&#xff1a; 奇校验&#x…

MacOS 系统中如何使用EF Core进行数据迁移?

原有 笔者最近在使用MacOS系统做asp.net core mvc项目开发。可是一直习惯了使用宇宙最强大的vs2019工具。突然换到苹果系统就感觉什么都是问题了。现在我将遇到该问题的解决方案做下记录&#xff0c;方便自己也是方便别的同学快速的解决问题。 发现有坑 其实最开始我也是翻阅…

RocketMQ 存储优化技术 解析——图解、源码级解析

&#x1f34a; Java学习&#xff1a;Java从入门到精通总结 &#x1f34a; 深入浅出RocketMQ设计思想&#xff1a;深入浅出RocketMQ设计思想 &#x1f34a; 绝对不一样的职场干货&#xff1a;大厂最佳实践经验指南 &#x1f4c6; 最近更新&#xff1a;2023年1月13日 &#x…

Django 后端没有接收到前端anxios的 post 内容

前端使用 vue 无论怎样 post 后端都说没有接收到值&#xff0c;&#xff08;后端接口正确&#xff09; 寻找原因&#xff1a; 1、前端查看自己的请求类型 Content-Type:application/json 我们的请求是这样的&#xff1a; axios({method:post,url:/video/upload,data:{"…

RedHat6配置本地yum源(最新超详细过程)

一、环境准备 挂载iso的镜像文件在CD/DVD驱动器上&#xff0c;需要确保&#xff0c;已连接已打开&#xff0c;且CD/DVD上的介质符合当前操作系统的版本。 挂载本地光盘到系统 在“编辑设置”——>“硬件”——>“CD/DVD驱动器”里指定操作系统的ISO镜像文件 光驱挂载…

web性能测试:Lighthouse测试实践

一工具简介 Lighthouse是Google开源的一个自动化工具&#xff0c;它可以搜集多个Web网页性能指标&#xff0c;分析Web应用的性能并生成报告&#xff0c;为开发人员进行性能优化提供了参考方向。1工作原理•Driver&#xff08;驱动&#xff09;—— 通过 Chrome Debugging Proto…

力扣sql基础篇(六)

力扣sql基础篇(六) 1 学生参加各科测试的次数 1.1 题目内容 1.1.1 基本题目信息 1.1.2 示例输入输出 a 输入示例 b 输出示例 1.2 示例sql语句 # 无论考没考试都要该科目这栏且无连接字段,就可以考虑笛卡尔积了 SELECT s.student_id,s.student_name,s.subject_name,IFNULL…

【软件STM32cubeIDE下STM32F4xx使用DMA+定时器推PWM+灯带WS2812-进阶-综合汇总(讲解移植相关)】

2TOC &#xff08;1&#xff09;前言 做灯带ws2812其实有一段时间了&#xff0c;中间遇到很多问题&#xff0c;从开始的学习&#xff0c;到后来慢慢熟悉&#xff0c;再到后来尝试点很多灯带&#xff0c;做过非常多的实验了&#xff0c;自己新建工程&#xff0c;几乎尝试过很多…