javascript - Axios Get Request returned [Proxy proxy] - Flask & Vue.js - Stack Overflow

I use ponent in a rendered page. Rendered page have an object array, it's kpi_list[]. I 'do axios get request' in rendering page.

     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))
           }  
           .
           .
           .

Output:

(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)

shouldn't I see it like this?

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

And whats is [Proxy, proxy]?

I send kpi_kalite array to ponent as a prop. In ponent mounted, I try things like:

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

OUTPUT:

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

There is a problem, right? These are not the objects or array of objects I need to see.

I use ponent in a rendered page. Rendered page have an object array, it's kpi_list[]. I 'do axios get request' in rendering page.

     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))
           }  
           .
           .
           .

Output:

(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)

shouldn't I see it like this?

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

And whats is [Proxy, proxy]?

I send kpi_kalite array to ponent as a prop. In ponent mounted, I try things like:

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

OUTPUT:

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

There is a problem, right? These are not the objects or array of objects I need to see.

• javascript
• vue.js
• axios
• proxy

Share Improve this question Follow edited Feb 10, 2024 at 13:43 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Sep 16, 2021 at 5:42 sssss_ssssssssss_sssss 17133 silver badges1616 bronze badges 4

• Are you using vue 3? – Nima Ebrazeh Commented Sep 16, 2021 at 6:16
• yes @NimaEbrazeh – sssss_sssss Commented Sep 16, 2021 at 6:38
• 1 In addition to @Cosimo Chelini answer, you can read this question which is the answer of you're question. – Nima Ebrazeh Commented Sep 16, 2021 at 7:26
• yeah it's work thank you – sssss_sssss Commented Sep 16, 2021 at 8:00

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

this is normal! vue 3 uses proxies to make the properties you define in the data reactive, consequently going to log the object you see the proxy that contains the true value. to see the true value in console you should do like

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

if you want to read more