Axios Get Request 返回 [代理代理] - Flask & Vue.js

Question

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

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

输出:

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

我不应该这样看吗?

[
{id: 1, base: 1, name: 'A', searchable_name: 'A', 
user: '1', …},
{id: 5, base: 1, name: 'B', searchable_name: 'B', 
user: '1', …}
]

什么是[Proxy, Proxy]?

我将kpi_kalite数组作为道具发送给组件。在组件安装中，我尝试这样做:

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

输出:

Proxy {id: 1, base: 1, name: 'A', searchable_name: 'A', user: 
'1', …}
(2) [Proxy, Proxy]

有问题，对吗?这些不是我需要看到的对象或对象数组。

Answer 1

这是正常的!vue 3使用代理使您在data中定义的属性响应性，因此将记录对象，您将看到包含真值的代理．要在控制台中查看真实值，您应该执行如下命令

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

如果你想阅读更多