Vue.js 3 uses Proxies, a powerful metaprogramming feature. By using Proxies Vue.js 3 managed to resolve the reactivity-related issues in Vue.js 2.
Since Proxies are a relatively new thing, lots of developers are having trouble understanding how Proxies work.
One very frequent question is how to access the underlying value of a Proxy in Vue.js 3.
Many people are suggesting the use of JSON.parse and JSON.stringify to achieve this, the use of which can become a headache for large datasets or repeated operations.
Thankfully, Vue already ships with helper functions to achieve just that in a safer way.
import { isProxy, toRaw } from 'vue';
let rawData = someData;
if (isProxy(someData)){
rawData = toRaw(someData)
}
Thanks! This saved me a lot of headache.
Yes there is trouble 🙂 if I do this in my edit Dialog open(),
this.form = toRaw(this.$props.product);
the property in template is shown ok {{ product.name }}
but if I use it through the this.form.name, it only updates on every other time I open my dialog. It’s like the values propagate too slowly to render to template.
How can force immediate copy from $props.product to this.form, so that this.form properties become visible in {{ this.form.name }}
i tried form: {} and form: ref({}) but no difference.
WOW. That’s very helpful. I did not find this issue on documentation. Thank you a lot!
Great blog.
It didn’t work for me when trying to add it as a payload to an API request.
Instead, I created a method the reproduced the proxy to a real array by looping through the keys and vals and adding them to the new array.