Axios Get 请求返回【Proxy代理】-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', …}
]

什么是[代理，代理]？

我将 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 使用 proxies 使您在数据中定义的属性reactive，因此将记录您看到包含true value的代理的对象。 要在控制台中查看真实值，您应该这样做

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

如果您想了解更多

Answer 2

我在 vue3 中需要完成一项简单的任务。我不是 vue 用户。这shi*浪费了我至少一个小时的时间，因为我认为 useQuery 有问题。