vue路由传递对象数组,打印数据 [object Object] 解决方法

news2024/11/30 10:38:24

1、router路由传参一般两种方式。一种是query传参,另外一种则是params传参。由于params传参刷新页面,会导致数据丢失。所以采用query传参方式比较多,但当使用query传递对象,数组时,刷新页面会报[object Object],数据无法使用。

2,下面看一下我们要传的数组格式,只是一个示例仅供参考,一个数组里面包含两个对象
在这里插入图片描述

当我们按照路由传参传过来时,第一次打印出来是正常的
在这里插入图片描述
刷新页面后
在这里插入图片描述
简单的数组 / 单条数据无影响,数组对象无法获取,变为[object Object]。

解决方法

     this.$router.push({
        path: "/reportingPage",
        query: { 
          addData: JSON.stringify(this.selectedList),//转为字符串
          medicationAdvice:this.selectedId
         }
      });
 created() {
    // 接受传递的参数
   console.log(JSON.parse(this.$route.query.addData),this.$route.query.medicationAdvice);对象
  },

就可以了

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

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

相关文章

J. Not Another Path Query Problem

Problem - J - Codeforces 思路:因为我们要让路径的与大于等于V,假设某个路径的与为S,存在两种可能,一种是SV,另一种可能是在第i个位置V的二进制为零,而S的二进制为1,且前i-1个二进制是相等的。…

FLAC格式如何转换为MP3?分享三种方法!

在数字音乐的世界中,FLAC和MP3是两种常见的音频格式。FLAC (Free Lossless Audio Codec)提供无损的音质,但文件大小较大。而MP3文件较小,更易于传输和保存,但可能牺牲一些音质。如果你想将FLAC音频转换成MP3格式,本文将…

【算法】数位DP

文章目录 数位DP前置知识——位运算与集合论 例题——2376. 统计特殊整数思路代码模板(重要!⭐⭐⭐⭐⭐)针对这道题,可以去掉 isNum 参数 相关题目练习233. 数字 1 的个数⭐⭐⭐⭐⭐代码模板修改——记录cnt(前面已经选…

Docker(三)之容器管理工具 Docker生态架构及部署

容器管理工具Docker生态架构及部署 一、Docker生态架构 1.1 Docker Containers Are Everywhere 1.2 生态架构 1.2.1 Docker Host 用于安装Docker daemon的主机,即为Docker Host,并且该主机中可基于容器镜像运行容器。 1.2.2 Docker daemon 用于管理…

基础篇-STM32初体验

MDK5编译例程 串口下载程序 DAP下载程序 DAP调试程序

多领域入选!棱镜七彩上榜《嘶吼2023网络安全产业图谱》

2023年7月10日,国内网络安全行业第三方研究机构嘶吼安全产业研究院联合国家网络安全产业园区(通州园)正式发布《嘶吼2023网络安全产业图谱》,棱镜七彩凭借在开源安全领域的创新性及服务能力,上榜开发与应用、应用于产业…

解决2003-Host‘ ‘is not allowed to connect to this MySQL server,实现远程连接本地数据库

目录 1.打开终端控制面板 2.进入mysql库 3.执行更新权限语句 4.查看权限 5.刷新服务器配置 6.进入Navict测试连接 在使用Navicat远程连接本地数据库时,遇到了这样一个问题, 我使用 本地主机的地址,连接本地的数据库,报错host…

(CentOS 7)nvidia-smi:Failed to initialize NVML: Driver/library version mismatch

[CentOS 7]nvidia-smi:Failed to initialize NVML: Driver/library version mismatch 问题源头: nvidia-smi \text{nvidia-smi} nvidia-smi报错问题 CUDA \text{CUDA} CUDA安装时的问题 这里仅描述自身发现的一种情况,希望对大家有所帮助。 问题源头&…

JMX+Prometheus监控Grafana展示

文章目录 概述Java代码使用PrometheusApi统计监控指标PrometheusGrafana展示 概述 最近在阅读InLong的源码,发现它采用通过JMXPrometheus进行指标监控。 这里做了下延伸将介绍使用JMXPrometheusGrafana进行监控指标展示,这里单独将Metric部分代码抽离出…

网络配置管理器中的系统日志配置

包含许多设备的大型网络基础设施将在其清单中具有某些重要和关键设备,例如核心路由器或防火墙。这些设备必须始终受到有关任何配置更改的持续监视。 在如此庞大的网络中,手动跟踪所有这些重要设备并在每次进行新更改时触发备份几乎是不可能的。如果管理…

windows环境部署seata注意事项

1.将seata放置微服务项目中: 1.服务端下载地址:https://github.com/seata/seata/releases/download/v1.4.2/seata-server-1.4.2.zip 2.源码下载地址: https://github.com/seata/seata (将script目录以及里面文件放至seata-server中&#xff…

力扣挑战:中枢整数的定义与寻找方法

本篇博客讲解力扣“2485. 找出中枢整数”的解题思路,这是题目链接。 给定一个正整数n,如果它存在一个中枢整数x,那么满足以下等式: 123…x x(x1)(x2)…n 利用等差数列求和公式:(首项末项)项数2,以及项数…

优思学院|TQM与六西格玛完美契合:质量和利润的共赢之道

TQM的本质乃无止境地追求质量,然而在解决各个问题点时,直到目的逹成之前必须不断地转动PDCA或者六西格玛方法中的DMAIC这些个活动,究竟与经营有什么关连呢? 我们都知道企业的目的是生产好的产品、提供好的服务,并以合…

火热的低代码和无代码赛道

一、背景 星霜荏苒,居诸不息。互联网技术飞速发展,软件的设计、开发、应用也是风发泉涌,无论是开发工具还是应用程序,都在不断追求降本增效,极大地推动了软件研发的长足进步。但然而,长期以来,我…

elementui-drawer模板

1、效果图 2、上代码 <template><div><el-drawersize"100%":visible.sync"drawer"style"position: absolute;"class"details":modal-append-to-body"false":modal "false":before-close"ha…

Linux环境基础开发工具使用(yum软件安装工具的使用、vim编辑器使用及握gcc/g++编译器的使用等)

Linux环境基础开发工具使用 1.Linux 软件包管理器 yum1.1 什么是软件包1.2 yum常用命令1.3 好玩的yum包 2.Linux开发工具2.1 vim工具的由来2.2 vim模式①基本模式②派生模式 2.3 vim的基本操作2.4 vim正常模式命令集2.5 vim末行模式命令集2.6 简单vim配置 3.Linux编译器 - gcc/…

并发容器(三)BlockigQueue

阻塞队列 看几个常用的实现&#xff1a; 1.ArrayBlockingQueue是最简单的一种阻塞队列&#xff0c;底层是由数组实现 2.LinkedBlockingQueue 底层是由链表实现的&#xff0c;锁的粒度更细&#xff0c;但是占用的内存更大 当移除元素的时候takeLock和putLock一起加 3.Synchrono…

HCIP第七天

题目 拓扑图 1.所有路由器各自创建一个环回接口&#xff0c;合理规划IP地址 测试 2. R1-R2-R3-R4-R6之间使用OSPF协议&#xff0c;R4-R5-R6之间使用RIP协议 3. R1环回重发布方式引入OSPF网络 4. R4/R6上进行双点双向重发布 将OSPF中的环回接口改成broadcast 因为华为默认环回接…

用ChatGPT解析Wireshark抓取的数据包样例

用Wireshark抓取的数据包&#xff0c;常用于网络故障排查、分析和应用程序通信协议开发。其抓取的分组数据结果为底层数据&#xff0c;看起来比较困难&#xff0c;现在通过chatGPT大模型&#xff0c;可以将原始抓包信息数据提交给AI进行解析&#xff0c;本文即是进行尝试的样例…

4.4Java EE——多对多查询

订单和商品多对多关系图 在实际项目开发中&#xff0c;多对多的关联关系非常常见。以订单和商品为例&#xff0c;一个订单可以包含多种商品&#xff0c;而一种商品又可以属于多个订单&#xff0c;订单和商品属于多对多关联关系&#xff0c;订单和商品之间的关联关系如图。 在数…