Vue Array converted to Proxy object Vue Array converted to Proxy object vue.js vue.js

Vue Array converted to Proxy object


Items in data like your tickets are made into observable objects. This is to allow reactivity (automatically re-rendering the UI and other features). This is expected and the returned object should behave just like the array.

Check out the reactivity docs because you need to interact with arrays in a specific pattern or it will not update on the ui: https://v3.vuejs.org/guide/reactivity-fundamentals.html

If you do not want to have reactivity - maybe you never update tickets on the client and just want to display them - you can use Object.freeze() on response.data;


You're not doing anything wrong. You're just finding out some of the intricacies of using vue 3.

Mostly you can work with the proxied array-object just like you would with the original. However the docs do state:

The use of Proxy does introduce a new caveat to be aware of: the proxied object is not equal to the original object in terms of identity comparison (===).

Other operations that rely on strict equality comparisons can also be impacted, such as .includes() or .indexOf().

The advice in docs doesn't quite cover these cases yet. I found I could get .includes() to work when checking against Object.values(array). (thanks to @adamStarrh in the comments).