表格数据存本地,实时保存

news2024/9/28 9:32:28

需求:填写表格时,每填写一个就要保存

将表格数据以json对象的格式存在本地,刷新时在created或者mounted将数据取出,点击保存时将存的数据清除,但是如果不点击保存,直接填写下一个数据,之前填写的数据就会存到这个表上,造成数据错乱

解决方法一:

表格id是唯一的,就将表格id和需要存的数据以json格式存在本地,在created或者mounted将数据取出的时候判断id是否一致(Object.keys().includes()),一致就将数据赋值(一致的话就说明是在本页刷新),不一致就不赋值(不一致说明,已经切换页面)

清除本地数据:在点击保存的时候,id一致就清除,id不一致就不清除

 解决方法二:

根据路由判断,监听路由 

判断是否是从列表页面跳转来的,

如果是从列表页面跳转来的就删除缓存,

如果不是,则不清除(说明是在当前编辑页进行刷新操作)

记录分页 pinia

1.这个是状态管理,初始值null

2. 点击新增或者编辑的时候把你请求列表的字段路由传参传过去

3.在编辑也返回的时候把这个数据存到状态管理里面 

4.进来列表页的时候在判断状态是否为null

 null就不赋值了 直接请求

5.如果有值就赋值上去请求 请求完清空 防止去别的页面再回来也会记录

   进入详情页的时候也要清空 也是为了防止去别的页面在回来有记录

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

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

相关文章

【java算法专场】双指针(下)

611. 有效三角形的个数 目录 611. 有效三角形的个数 算法思路 算法代码 LCR 179. 查找总价格为目标值的两个商品 算法思路 算法代码 HashSet 双指针 15. 三数之和 算法思路 算法代码 18. 四数之和 ​编辑算法思路 算法代码 611. 有效三角形的个数 算法思路 算法…

echarts无法加载Map地图的问题

项目场景: echarts无法加载Map地图的问题 详情 查阅相关资料讲,echarts4.9以上版本已经移除了map,那么我们就得重新打包echarts文件了。打包echarts.min.js的链接:https://echarts.apache.org/zh/builder.html 在这个链接页面可…

CTFShow的36D杯

神光 还是想了一下,但那个异或搞不出来,都是对dword_41A038操作,想起开头就给了 key ,还有反调试应该是要调试的 输出的应该就是 flag ,只是为什么是乱码呢? 放 od 再试试,直接就出 flag 了&am…

对比:9款最佳个人项目管理软件盘点

文章介绍了9款个人项目管理软件:PingCode、Worktile、Flowus、Todoist、Trello、Teambition、有道云笔记、Notion、Microsoft To Do。 在管理个人项目时,是否常感到信息零散、进度难以把控?选择合适的项目管理软件,可以有效解决这…

关于解决双屏幕鼠标移动方向问题

1.点开设置》系统》屏幕 2.分清屏幕标识,一般笔记本为1 3.点击要移动的屏幕,然后按住鼠标左键不方进行移动 感谢您的浏览,希望可以帮到您!

【探索Linux】P.38(传输层 —— TCP协议通信连接管理机制简介 | TCP连接状态转换)

阅读导航 引言一、TCP协议通信连接管理机制二、连接状态转换1. TCP状态转换图2. 状态转换过程3. 理解TIME_WAIT状态(1)目的和作用(2)状态转换(3)特殊情况(4)影响和优化 4. 理解 CLOS…

医疗器械的售后与服务探讨

彩虹医械维修培训 8月长期班报名啦 学技术 考证书 技术支持 大型医疗设备的宕机不仅会造成医疗机构直接的巨额经济损失,宕机期间的损失甚至可以超过维修费用,而且还可能会耽误患者的病情检查,因此对医疗设备的定期保养已经成为各级医院的…

学生选课管理系统(Java+MySQL)

技术栈 Java: 用于实现系统的核心业务逻辑。MySQL: 作为关系型数据库,用于存储系统中的数据。JDBC: 用于Java程序与MySQL数据库之间的连接和交互。Swing GUI: 用于创建图形用户界面,提升用户体验。 系统功能 我们的学生选课管理系统主要针对学生和管理…

SQL中on和where的区别

SQL中on和where的区别   前言,在工作写SQL使用中,在涉及到多个表的关联时,既可以通过on进行数据过滤,又可以使用where进行数据过滤, 确实有点不太了解这两个关键字在left join后的区别,所以就去查了些资…

从产业链视角审视工作

从产业链视角审视工作:定位、价值与成长 作为一名技术博客博主,我经常收到各种关于职业发展、技术成长和学习路径的问题。最近,我看了一份学习报告,其中提到了一种非常有趣且实用的视角——从产业链的角度去审视自己的工作。这种视…

【实战指南】揭秘Pandas:从零开始掌握数据处理与分析的超级工具箱

目录 Series 创建 Series 访问数据 DataFrame 创建 DataFrame 读取 CSV 文件 写入 CSV 文件 基本操作 查看前几行: 查看后几行: 描述性统计: 选择列: 选择行: 条件筛选: 排序: 合并数据: Pandas 是一个强大的 Python 库,主要用于数据分析和数据处理…

【INTEL(ALTERA)】为什么我使用 PIO 边缘捕获中断的 Nios® II 设计不能正常工作?

目录 说明 解决方法 说明 当用户选择了不正确的边缘捕获设置,从而阻止触发中断时,可能会出现此问题。 在 PIO(并行 I/O)英特尔 FPGA IP内核中,如果“启用单个位设置/清除”选项被关闭,则将任何值写入边…

智驭未来:人工智能与目标检测的深度交融

在科技日新月异的今天,人工智能(AI)如同一股不可阻挡的浪潮,正以前所未有的速度重塑着我们的世界。在众多AI应用领域中,目标检测以其独特的魅力和广泛的应用前景,成为了连接现实与智能世界的桥梁。本文旨在…

精讲:java之多维数组的使用

一、多维数组简介 1.为什么需要二维数组 我们看下面这个例子?“ 某公司2022年全年各个月份的销售额进行登记。按月份存储,可以使用一维数组。如果改写为按季度为单位存储怎么办呢? 或许现在学习了一维数组的你只能申请四个一维数组去存储每…

探索Kotlin:从K1到K2

人不走空 🌈个人主页:人不走空 💖系列专栏:算法专题 ⏰诗词歌赋:斯是陋室,惟吾德馨 嘿,小伙伴们!今天我们来聊聊Kotlin,这个在安卓开发圈里越来越火的编程语言。…

轴心轨迹的绘制(包含降噪前处理,MATLAB)

由于旋转机械振动波形的噪声干扰大,直接对振动数据特征提取和选择的故障诊断方法,其精度容易受到噪声影响。当前,基于图像的旋转机械故障诊断技术已经得到飞速的发展。针对旋转机械的故障诊断问题,传统方法趋向于从振动数据中提取…

用6000万茅台案,了解什么是外挂?

近日,一起涉案金额高达6000余万元的案件出现在人们视野中。此前浙江丽水云和县公安局侦破了一起非法利用软件抢购电商平台茅台酒案。 据了解,犯罪嫌疑人以非法牟利为目的,开发了抢购软件,以有偿原价抢购电商平台飞天茅台酒为噱头&…

android13 rom frameworks 蓝牙自动接收文件

总纲 android13 rom 开发总纲说明 目录 1.前言 2.源码查找 3.我们先实现第一种改法 4.实现第二种改法 5.第三种改法代码参考 6.编译测试 1.前言 我们从导航栏这里,点开这个蓝牙的接收框,弹出来的对话框,使用android studio 的layout inspector可以发现这个是 Bluetoo…

如何用IP地址申请SSL证书实现网络安全

互联网是一个全球性的网络,它将世界各地的计算机系统和设备连接在一起。在这个庞大的网络中,每个设备都需要一个唯一的标识符,即IP(Internet Protocol)地址,以便其他设备能够找到并与其通信。然而&#xff…

解密 AI 客服:LangChain+ChatGPT 打造智能客服新时代

你需要了解 ChatGPT ChatGPT 是 OpenAI 开发的一种基于人工智能技术的自然语言处理模型。它可以通过对大量文本数据进行训练,自动生成高质量的回答和对话。ChatGPT 具有高效、准确、自然的特点,可以帮助人们更加高效地处理信息和交流。 ChatGPT 有很多…