Questions about toRaw()

[rmwxxwmr]

As shown in the code below, I want to assign the data from data1 to data2, and I want to use the toRaw function so that data1 and data2 are just copies without being linked. However, when I change the value of data2, the value of data1 is also changed. Why is that happening?

This demo is based on a real issue. I have a table, and I want to edit the data of one row. When I click the edit button, the data of that row is displayed in a dialog box. After making changes, an AJAX call is made. In this case, I only need the row data for display purposes, and I don't want the table's data to be changed when editing the data

[LinusBorg]

toRaw does not create a copy. It just gives you the underlying raw object that was previously wrapped with a reactive proxy by reactive()

You might want to look at https://developer.mozilla.org/en-US/docs/Web/API/structuredClone or use one of the common deepClone functions from packages such as lodash-es or similar.

[Shyam-Chen]

import { toRaw } from 'vue';

data2.user = structuredClone(toRaw(data1.user)); // This is what I personally use

// or

import cloneDeep from 'lodash/cloneDeep';

data2.user = cloneDeep(data1.user);

// or

import { cloneDeep } from 'lodash-es';

data2.user = cloneDeep(data1.user);

[WhereJuly]

@rmwxxwmr

There are two more solutions to your problem.

The straightforward one - detach reactivity altogether with JSON.stringify/parse.

data2.user = JSON.parse(JSON.stringify(data1.user))

The other solution is to use a twist of a Memento pattern that creates the user object double at edit method invokation, provides the original for editing. At edit confirm action it keeps original edited. At cancel it restores the original values from a double created before.