vue中传参出现object 20 object解决办法

最新推荐文章于 2023-09-11 17:02:43 发布
最新推荐文章于 2023-09-11 17:02:43 发布
阅读量1.7w 收藏 4
点赞数 5
文章标签： vue api 传参
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42970173/article/details/103072240
版权

在这里插入图片描述在api中使用最原始的拼接办法

页面传参：
在这里插入图片描述[object%20Object]说明对象中又传了一个对象，本身在api中params就是一个对象了。
一开始我传值写的是({XXX:XXXX}) 类似嵌套了对象，所以url中出现了[object%20Object]

在传值的时候，参数只要用（）即可，不要在用（｛｝）这种方式。

使用（｛｝）这种写法，api必须

export function deleteTbComponentConfig(params) {
    return request.delete(`/compmgr/tbComponentConfig/${params.id}`)
}

其实还不太理解，后续遇到类似问题再来补充

ppandpp
关注
  • 5
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
使用ajax请求时地址显示[object%20Object]
m0_51380540的博客
10-26 1382
问题描述： ajax请求代码： $.post({ url:"${pageContext.request.contextPath}/admin/checkAdminPwd", data:{"adminName":$("#adminName").val(),"oldPwd":$("#oldPwd").val()}, success:function (data) { if (data.toString()=='OK'){ $("#pwdInfo")
对象作为参数提示[object Object]
dai_yanxia的博客
04-26 3462
坑人的[object Object],有时候为了逻辑处理起来更方便，我们可能需要给某一个函数传一个对象，这样操作可以省去我们的数据遍历，但是每次操作都是报错[obj,obj],吃了几次亏，这次打算找一下原因，不然每次都要为了避免出现这样的错误而改为用其他方式来实现，这不是一个明智的选择。 首先给函数传一个对象作为参数，代码如下： <body> <div class="smal...
使用Ajax时[object%20object] 和POST 415报错以及400报错的解决方案
qq_39864107的博客
01-26 1664
出现问题 Question1 以前经常用 【$.ajax 没有出现过这种情况，按F12控制台出现[object%20object]，这次换成了$.post，网上查阅了一番死马当活马医，将post改成ajax成功不报错 借助这篇博文（https://www.cnblogs.com/windowsxpxp/p/12228961.html） 解决了问题 Question2 HTTP 415 错误 – 不支持的媒体类型(Unsupported media type) 参考：（https://blog.csdn.ne
vue中传参出现[object%20Object]解决办法
weixin_45221886的博客
10-19 3640
vue 的post 请求传参用 逗号
解决vue中post请求传递对象参数变成[object%20Object]的问题
热门推荐
爱吃鸡腿的明仔
09-24 2万+
1.问题描述 前后端分离项目中，前端vue项目的一个post请求接口传递json对象参数时，传递变成[object%20Object]形式，且接口调用出错： 2.问题解决 经过一番挣扎之后，终于解决了问题。一开始压根没有注意到接口调用传参格式问题，犯这种低级错误实在是不应该。 修改前： 修改后： 3.传参规范 get请求传参： post请求传参： 4.修改之后成功调用 ...
vue子组件书写img报错 [object%20Object]:1 GET http://localhost:8080/[object%20Object] 404 (Not Found)
Dreamer_Ji的博客
07-27 4173
小白在遇到这个问题的时候抓破脑子找了很多办法才成功解决了。 解决办法： 将地址通过import进行导入，在引用的时候采用属性绑定的方式进行进行使用便能解决问题，此办法主要针对的是子组件使用img。 ...
vue路由传递对象数组，刷新页面，数据丢失[object Object](问题篇)
skyblue_afan的博客
08-30 8585
1、router路由编程式传参，一般两种方式。一种是query传参，另外一种则是params传参。由于params传参刷新页面，会导致数据丢失。所以采用query传参方式比较多，但当使用query传递对象，数组时，刷新页面会报[object Object]，数据无法使用。 2、所遇问题： 首先打印下要传递的对象数据 这是要传递的参数，先正常传参 在详情页接受参数 控制台打印的数据，第一次可以接收到 f5刷新页面，控制台打印 单条数据可以无影响，对象无法获取，变为[object Object]。
解决vue props传Array/Object类型值,子组件报错的情况
01-18
1、在vue中如果当在父组件通过props传Array/Object类型值给子组件的时候 2、如果子组件的props接收default为 ，如下 报错 原因：props default 数组／对象的默认值应当由一个工厂函数返回 解决： 补充知识：vue的...
vue2 router 动态传参,多个参数的实例
08-28
今天，我们来探索 Vue2 Router 动态传参的实例，并了解如何在路由中传递多个参数。 什么是 Vue Router？ Vue Router 是一个官方提供的路由管理器，用于管理应用程序中的路由。它允许开发者定义路由规则，并将其...
vue-router路由参数刷新消失的问题解决方法
08-30
路由参数刷新消失的问题解决方法是 vue-router 中常见的问题，本篇文章将为您提供四种解决方案。 解决方案一：Session & 服务器渲染 传统的解决方案是使用 Session 和服务器渲染。在登录页和主页是单独的两个页面...
vue的$http的get请求要加上params操作
01-22
补充知识：vue请求中 post get传参方式是不同的哦 我在学习vue，项目中post请求，get请求都用到了，我发现传参方式是不一样的。 post请求的例子： checkin (){ this.$http.post('my url',{ mobilePhone:this.phone,...
Vue将props值实时传递 并可修改的操作
10-14
在Vue框架中，props是用来从父组件向子组件传递数据的一种机制。然而，props值是设计为只读的，这意味着子组件内部不应该直接修改props的值，因为这可能会导致父组件的状态混乱。当需要子组件修改传递过来的props值...
vue发送请求url自带了个%20
m0_62276354的博客
12-17 986
vue发送请求接口后面无故多了%20
【JavaScript】参数为Object，但传递过去却成了[object object]
Owen的博客
11-17 6377
一、问题描述 将 Array 数组数据，作为对象的 value，将该 Object 作为接口参数传递，却成了[object object] selectionChange(list) { //list为 Array 类型数据 this.uploadData = { data : list}; //将 list 数组，作为对象的值 console.log(this.uploadData); }, this.uploadData 打印结果 将 this.uplo
[object%20Object] 使用JQuery ajax 报[object%20Object]
小爽帅到拖网速的博客
01-01 697
JQuery ajax 报[object%20Object] 解决办法： 用 $ .ajax代替$.post,增加type属性,type="post" <script> function a1(){ $.ajax({ url:"${pageContext.request.contextPath}/a1", data:{"name":$("#txtName").val()}, success:funct
成功解决[object%20Object]问题
nihaoa_1898的博客
02-11 5579
先来对bug进行情景在线： 修改之前的代码是这样的： 在login.vue中： this.loginInfo = response.data.data; cookie.set('guli_ucenter', this.loginInfo, { domain: 'localhost' }) 在default.vue中: var jsonStr = cookie.get("guli_ucenter") if(jsonStr) this.loginInfo =
接口路径错误 [object%20Object]解决方法
weixin_56590191的博客
09-11 898
【代码】接口路径错误 [object%20Object]解决方法。
ajax请求出现/[object%20Object]错误的解决办法
weixin_46295656的博客
05-07 2508
ajax请求出现/[object%20Object]错误的解决办法 做ajax请求时，莫名奇妙的出现了[object%20Object]，解决了一天，哭了~~ 如上图这种错误。 错误的原因是：你使用的Jquery的版本过低，不能使用 $.post() 。 两种解决方案： 1.升级高版本。 2.换一种写法，把$.post() 改成 $.ajax({ type: “post”, 。。。 格式 ...
数据分析的核心技能和方法
最新发布
07-19
数据分析的核心技能和方法
vue 组件传参 object
05-22
Vue 组件传递对象参数的方式有多种，以下是其中几种常用的方式： 1. 父组件通过 props 传递对象参数给子组件 父组件中： ```html <template> <child-component :obj="obj"></child-component> </template> <script> export default { data() { return { obj: { name: 'Vue', version: '3.0.0' } } } } </script> ``` 子组件中： ```html <template> <div>{{ obj.name }}</div> </template> <script> export default { props: { obj: { type: Object, required: true } } } </script> ``` 2. 子组件通过 emit 事件传递对象参数给父组件 子组件中： ```html <template> <button @click="handleClick">Click me</button> </template> <script> export default { data() { return { obj: { name: 'Vue', version: '3.0.0' } } }, methods: { handleClick() { this.$emit('my-event', this.obj) } } } </script> ``` 父组件中： ```html <template> <child-component @my-event="handleEvent"></child-component> </template> <script> export default { methods: { handleEvent(obj) { console.log(obj) } } } </script> ``` 以上是两种常见的传递对象参数的方式，你可以根据具体的业务需求选择使用哪种方式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值