vue请求后端返回的数据res[object object]

最新推荐文章于 2024-05-27 16:10:57 发布
最新推荐文章于 2024-05-27 16:10:57 发布
阅读量9.6k 收藏 20
点赞数 9
分类专栏： 笔记 文章标签： vue json
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45001147/article/details/105231995
版权

JSON.stringify（）和JSON.parse()

返回的数据显示res[object object]是不可读状态的解决办法：
在这里插入图片描述
我们应该把对象转为JSON形式显示出来，所以需要使用
JSON.stringify(res)
简单解释以下JSON.stringfy()和JSON.parse()方法的作用：

  1. JSON.stringfy()：将 JavaScript 对象转换为 JSON 字符串
  2. 而JSON.parse()是将JSON字符串转为一个对象。
北城南溪
关注
  • 9
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
前端 JavaScript 中 JSON.stringify() 的基本用法
编程三昧
06-29 1102
前言 在开发工作中，我们可能会碰到这样的需求：需要将某个对象内容弹窗显示或者保存在文件中，这时候如果你直接弹窗的话，很可能就是下面这样的： 因为很多接口它对参数有要求，比如只能是字符串之类的。 这时候，就需要我们将对象转换为字符串进行输出，JSON.stringify() 方法就可以帮我们实现将对象转为字符串的过程。 方法描述 JSON.stringify() 方法将一个 JavaScript 对象或值转换为 JSON 字符串，如果指定了一个 replacer 函数，则可以选择性地替换值，或者指定的 rep
vue ---- Object的一些常用的方法
weixin_30920091的博客
01-17 4770
在对象上添加新属性的几种方法： 直接附代码： 法一：Es6扩展运算符添加属性 法二：利用语法Object.assign(target, ...sources) target目标对象、sources源对象、返回值目标对象。 如果目标对象中的属性具有相同的键，则属性将被源中的属性覆盖。后来的源的属性将类似地覆盖早先的属性。Object.assign 方法只会拷贝源对象自身的并且可...
vue 获取本地的json文件
qq_43159578的博客
09-10 1599
很多时候我们需要从本地读取JSON文件里面的内容，但是找了很久我都沒有找到比较实用的；所以分享一下我的vue获取本地json文件的方法。 我的项目结构 获取方法 其实就是用模拟get请求的方法拿到json文件，然后再解析，但是在这之前我们需要对请求头做一下处理，否则拿不到文件 const newInstance = this.$ajax.create({ baseURL: '', time..
vue 插槽
weixin_49295874的博客
10-10 377
插槽 匿名插槽： 在注册的父组件： <div> //子组件 <child> 插槽显示的内容 </child> </div> 子组件： <div> <slot></slot> </div> 具名插槽 ： 需要多个插槽时，可以利用 元素的一个特殊的特性：name来定义具名插槽 在注册的父组件： <div> <child> <tem
Vue发起请求后端数据
最新发布
qq_57319760的博客
05-27 1346
在Vue中使用请求工具发起请求
vue路由传参当刷新页面时，参数变成“[object Object]”
铁锤妹妹的博客
11-25 5358
如果传参是一个`对象`，点击进入页面路由可以获取对象的值；但是刷新页面会导致获取不到对象值，被强制转换为字符串 `"[object Object]"`，导致数据不能使用。
Vue性能提升之Object.freeze()
muzidigbig的博客
12-24 7334
一、序 在 Vue 的文档中介绍数据绑定和响应时，特意标注了对于经过 Object.freeze() 方法的对象无法进行更新响应。因此，特意去查了 Object.freeze() 方法的具体含义。 二、含义 Object.freeze() 方法用于冻结对象，禁止对于该对象的属性进行修改（由于数组本质也是对象，因此该方法可以对数组使用）。在 Mozilla MDN 中是如下介绍的： 可以冻结一个对象。一个被冻结的对象再也不能被修改；冻结了一个对象则不能向这个对象添加新的属性，不能删除已有属性，不能修
vue中后端做Excel导出功能返回数据流前端的处理操作
10-14
总结来说，Vue中处理后端返回的Excel数据流，主要是通过axios发起请求，将返回的Blob数据转化为可下载的URL，然后创建一个隐藏的a标签进行下载操作。这种方式灵活且高效，适合大多数现代浏览器环境。在实际开发中，...
vueCli3.0文件上传后，后端返回流,前端转换成pdf预览的3种方式
04-22
// 假设res.data是后端返回的PDF流数据 const blob = new Blob([res.data], { type: 'application/pdf' }); const url = URL.createObjectURL(blob); // 使用PDF.js预览PDF PDFJS.getDocument(url).promise....
vue resource post请求时遇到的坑
11-27
// global Vue object Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback); Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback); // in a Vue instance ...
vue3.0中的双向数据绑定方法及优缺点
12-12
在 Vue 2.x 版本中，这一机制是通过 `Object.defineProperty` 来实现的，然而在 Vue 3.0 中，这一方法被 `Proxy` 替代，以提供更高效的数据绑定和更丰富的操作拦截。 在 Vue 2.x 中，`Object.defineProperty` 被...
Vue + antd组件 实现后端返回二进制流导出Excel模版与上传Excel模版给后端
01-03
下载模版 上传更新 ... let Res = this.checkedList.map((itemm, indexx) => { this.newJointObj.forEach((item, index) => { if (item[Object.keys(item)] === itemm) { this.returnJoint.push(item);
Vue学习：回顾Object.defineProperty（给对象添加或者定义属性的）
weixin_47295886的博客
12-06 936
defineProperty: 当有人读取该属性的age属性时，get函数就会被调用，且返回值就是age的值 set函数=setter就会被调用：当有人修改person的age属性时，返回值就是age的值。且回收到修改的值 得到数据：get x修改数据 set 并且得到修改的值
vue 路由传递参数，解决刷新页面或返回上一页数据变成 [Object object]，及实例
m1009113872的博客
04-04 1246
快速解决vue传递参数为[Object Object]
Vue3 响应式系统 - 4 - object的响应式方案
undefined_521的博客
05-04 511
总结《Vue.js设计与实现》一书内容，结合自身理解 仅供记录&交流~
Vue源码学习（二）：Object的变化侦测
weixin_42936434的博客
10-15 280
Object 和Array的变化侦测采用不同的处理方式（后面会解释原因），这一篇将介绍Object的变化侦测。Vue.js会自动通过状态生成DOM，并将其输出到页面显示出来，这个过程叫渲染。通常，在运行时应用内部的状态会不断发生变化，此时需要不停地重新渲染。那如何知道状态发生变化了呢，变化侦测就是用来追踪状态变化的，一旦变化，就重新更新视图。变化侦测有两种类型，一种是“推”，一种是“拉”。
关于VUE中对object.object和object[object]的认识
拉风的小锋
11-08 8353
发现 在做项目的过程中偶然发现了使用object[object]和object.object得到的结果结果是一样的,这让我感觉到很讶异,毕竟以前使用object[object]都是在数组中使用的,并没有这样使用过. 案例 const lineChartData = { newVisitis: { expectedData: ['2020-12-1', '2020-12-2', '2020-12-3', '2020-12-4', '2020-12-5', '2020-12-6', '2020-12
JSON.stringify(responseStr))
梦想氧吧
11-14 957
stringify()用于从一个对象解析出字符串，responseStr是响应的数据
Vue：object变化侦测
前端御书房
08-06 647
object的变化侦测的核心是监听object数据的变化，可以通过Object.defineProperty和Proxy实现，Vue2.x时，ES6支持不是很理想，采用的是Obejct.definedProperty，Vue3已经使用Proxy对数据侦测进行重写。object变化侦测的流程是当对象触发getter时对依赖进行收集，当对象触发setter时触发与该数据相关的所有依赖，就是通知所有使用了该数据的地方。变化侦测指的是对数据进行监听当数据发生变化时，对变化的数据重新渲染，实现响应式渲染。
vue2项目根据后端返回树形数据展示内容
03-25
A：要展示后端返回的树形数据，可以使用Vue的递归组件（recursive component）来实现。递归组件通过嵌套自身的方式来展示树形结构，这种方式非常适合展示树形数据。 首先，需要定义一个递归组件，并为递归组件传入数据。在组件内部，可以通过v-for指令遍历子节点，并通过递归组件的形式来展示子节点。具体的操作如下： 1. 定义递归组件： ``` <template> <div class="item"> {{ item.name }} <div v-if="item.children"> <tree-item v-for="child in item.children" :key="child.id" :item="child"></tree-item> </div> </div> </template> <script> export default { name: 'TreeItem', props: { item: { type: Object, required: true } }, components: { TreeItem: this } } </script> ``` 在递归组件的定义中，首先展示当前节点的名称，然后通过v-if指令判断当前节点是否有子节点，如果有子节点，则通过循环遍历子节点，并将每个子节点传递给递归组件，以便展示子节点的信息。 2. 在父组件中使用递归组件： ``` <template> <div> <tree-item v-for="item in treeData" :key="item.id" :item="item"></tree-item> </div> </template> <script> import TreeItem from './TreeItem.vue' export default { name: 'Tree', components: { TreeItem }, data () { return { treeData: [] } }, mounted () { // 从后端获取树形数据 axios.get('/api/getTreeData').then(res => { this.treeData = res.data }).catch(err => console.log(err)) } } </script> ``` 在父组件中，先定义一个数据属性treeData来存储从后端获取的树形数据。在mounted钩子函数中通过axios库向后端发送请求，获取树形数据，并将获取到的数据存储到treeData中。然后，通过v-for指令遍历每个节点，并将节点传递给递归组件进行展示。 通过这种方式，就可以从后端获取树形数据，并在前端展示出来。同时，由于使用了Vue的递归组件，这种方式还具有很好的可维护性，可以方便地增加或修改组件的结构和样式。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值