Axios Get 请求返回 [Proxy 代理] - Flask & Vue.js

Question

我在渲染页面中使用组件。渲染的页面有一个对象数组，它是kpi_list[]. 我在渲染页面中“执行 axios get request”。

\n

     axios.get(URL + "/KPI/get_by_category/1").then(response=>{\n          for (const data in response.data) {\n              this.kpi_kalite.push(JSON.parse(JSON.stringify(response.data[data])))\n              console.log(Object.values(this.kpi_kalite))\n           }  \n           .\n           .\n           .\n

\n

输出：

\n

(2) [Proxy, Proxy]\n      0: Proxy {id: 1, base: 1, name: 'A', searchable_name: 'A', \n         user: '1', \xe2\x80\xa6}\n      1: Proxy {id: 5, base: 1, name: 'B', searchable_name: 'B', \n         user: '1', \xe2\x80\xa6}\n    length: 2\n    [[Prototype]]: Array(0)\n

\n

我不应该这样看吗？

\n

[\n   {id: 1, base: 1, name: 'A', searchable_name: 'A', \n     user: '1', \xe2\x80\xa6},\n   {id: 5, base: 1, name: 'B', searchable_name: 'B', \n     user: '1', \xe2\x80\xa6}\n]\n

\n

什么是[Proxy, proxy]？

\n

我将kpi_kalite数组作为道具发送到组件。\n在安装的组件中，我尝试以下操作：

\n

  mounted() {\n    console.log(this.kpi_kalite[0]) \n    console.log(Object.values(this.kpi_kalite))\n},\n

\n

输出：

\n

Proxy\xc2\xa0{id: 1, base: 1, name: 'A', searchable_name: 'A', user: \n       '1',\xc2\xa0\xe2\x80\xa6}\n(2)\xc2\xa0[Proxy, Proxy]\n

\n

有问题吧？这些不是我需要查看的对象或对象数组。

\n

Answer 1

这个是正常的！vue 3 使用代理使您在数据中定义的属性具有反应性，从而记录您看到的包含真实值的代理的对象。要在控制台中查看真实值，您应该这样做

console.log(JSON.parse(JSON.stringify(this.yourValue)))

如果你想阅读更多内容