Creating a proxy object on the array with data downloaded from api

Question

I don't know why after saving the data downloaded from api to the table, the table is closed in the proxy object.

data() {
    return {
      date: [],
  },

async dataToChart(code){
   try{
      const response = await fetch(`https://api.covid19api.com/total/country/${code}`);
      const data = await response.json();

      data.forEach((el, i) => {
      if(i > 250){
        this.date.push(el.Date)
      }
    });
    }catch(error){
       console.log(error);
    }
  },

and when I pass this table to a child component and display it there using console.log, the proxy object pops up:

Proxy {}
    [[Handler]]: Object
    [[Target]]: Array(49)
    [[IsRevoked]]: false

Answer 1

This is not with your code or API, This(Proxies) is how Vue3 observes the data properties. Mostly all properties are converted to Proxies As far I know. If you want to know why Proxies being used, you can watch this video, as Evan You(The creator of Vue) explains in a better way!! :-)

Proxies let's you intercept the object changes and do any actions accordingly.

To understand more about Proxies and stuff, you need to understand how Vue reactivity works.

As per MDN docs:

The Proxy object enables you to create a proxy for another object, which can intercept and redefine fundamental operations for that object.