4

I have have object problem is when I assign object to data property it converts into proxy object .

Here is what I am doing

 data() {
    return {
      msg: "",
      notifications: {},

    };
  },
  this.notifications =  TokenService.getUserInfo().unread_notifications;

Thats how I am receiving object

Proxy {0: {…}, 1: {…}, 2: {…}, 3: {…}, 4: {…}}
[[Handler]]: Object
[[Target]]: Array(5)
[[IsRevoked]]: false

What is the reason?

kissu
  • 40,416
  • 14
  • 65
  • 133
Bilal Arshad
  • 531
  • 3
  • 11
  • 33
  • 1
    https://v3.vuejs.org/guide/reactivity.html#proxied-objects. Also related: https://stackoverflow.com/q/64917686/1048572 – Bergi Apr 19 '21 at 17:12
  • "*I have have object problem*" - why do you have a problem with this, what doesn't work? Just use the proxy the same as you'd have used the object otherwise. – Bergi Apr 19 '21 at 17:14
  • i want to use this object in v-for loop but whenever it I get proxy object it for loop done't accept it – Bilal Arshad Apr 19 '21 at 17:15
  • Describe what "doesn't accept it" means exactly please. Show the code and the error. – CherryDT Apr 19 '21 at 18:17

1 Answers1

7

Reason is Vue 3 is using ES6 Proxy to make an objects reactive. You can study how that works in depth or you can just ignore it and work with objects as normal (Proxy is transparent wrapper and works everywhere as your original object)

Michal Levý
  • 33,064
  • 4
  • 68
  • 86
  • 2
    **"Proxy is transparent wrapper and works everywhere as your original object"** Except when it doesn't. For instance,a Proxy cannot be transferred between threads (i.e. Worker), which can make Vue a pain in the butt. – Mud Aug 17 '22 at 23:05
  • 4
    @Mud Just use `toRaw()` – Michal Levý Aug 18 '22 at 05:59