Vue JS 在 console.log 上返回 [Object object] 在 JSON.parse 上返回 Undefined

Posted 2023-02-22

【中文标题】Vue JS 在 console.log 上返回 [Object object] 在 JSON.parse 上返回 Undefined

【英文标题】：Vue JS returning [Object object] on console.log and Undefined on JSON.parse

【发布时间】：2020-04-12 16:05:15

【问题描述】：

所以我正在编写这个 Vue.JS 代码来显示 php 从服务器获取的数据。 PHP 向 Vue 返回一个 JSON 对象，而 VUE 必须显示它。我当前的代码是：

  axiosPost();

function axiosPost()

 axios.post(
  './ConversationGetter.php',
  
    function2call: 'getRecord',
    id: 1,
    access: this.accesstoken
  

)
.then(response =>  this.data=response.data;
console.log(response.data);
console.log("Response From VUE JS"+this.data);

)
.catch(error => );

问题是，首先console.log 正确打印响应数据。但是第二个console.log 显示的是这个：

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

如果我在显示数据时使用 JSON.parse，它会显示：

undefined

【问题讨论】：

可以发布response.data的内容吗？

是的。给我一秒钟。

因为 console.log('some string' + [someObject, someObject, etc]) 将 this.data 中的对象数组强制为字符串数组，而字符串对象变为 'object Object' - 即忽略第二个 console.log，它是完全符合预期，数据是正确的 - 使用 console.log('some string', [someObject, someObject, etc]) ... 注意 , 而不是 + ... 您的 console.log 将是您最初所期望的

@PrabhjotSinghKainth - 内容完全不相关

你可以使用 JSON.stringify()

【参考方案1】：

"+" 运算符在第二个控制台语句中转换为字符串。请改成","如下？

console.log("Response From VUE JS", this.data);

【参考方案2】：

您不需要JSON.parse .. 直接使用response.data。如果您想查看实际数据，请使用console.log(JSON.stringify(response.data))

【讨论】：

JSON.stringify 仍然返回 [Object object]

如果这是一个 webapi 响应，您可以在浏览器的网络选项卡中查看结构以检查响应结构或只是 console.log(response.data)