Copy object and change nested property in Vue

Question

I have this kind of object in data:

data () {
return {
    foo: {a: 'A', b: 'B', c: {title: "Main"}};
}}

I need to get exact copy of this object but change one thing there

foo2:  {a: 'A', b: 'B', c: {title: "Copy"}};

I tried setting foo2 in data as:

foo2: {...foo, c['title']:'Copy'},

But Im getting error:

error  Parsing error: Unexpected token, expected ","

Answer 1

foo2: {...foo, c: {...foo.c, title: 'Copy'}},

Answer 2

Spread foo into its own object with a c property with a value of an object. Then spread foo.c into this object, which you can add the title property to like so:

foo2: {...foo, c: {...foo.c, 'title':'Copy'}

Spreading foo.c will allow any additional own enumerable properties (if any) from foo.c to remain in the new c object value.

Answer 3

Isn't it？

const foo2 = { ...foo, c: { title: "Copy" } }

Answer 4

Will it work?

 const foo = {a: 'A', b: 'B', c: {title: "Main"}} const foo2 = {...foo, c: {...foo.c, title: 'Copy' } } console.log(foo2)