how to make property as reactive

[coader]

I have a object type is MenuItem and it has property like
visible:boolean

when I use it in template

...

because this prop is not reactive, sow how can I do? (assume that I can't change type of it)

[liulinboyi]

You can use like this:

Playground Demo link

But I dont't suggest to use like this. The best way is child component emit event to change the props in the parent component.

[coader]

if wrapper it as a reactive object, change this proxy's prop value will effect DOM, but what I need is change the plain object:
const item = {title:'New',visible:true}

pass it to component:

then set item.visible=false

if define MenuItem as type: {visible?: Ref}
also need set visible = ref(false) before pass it to template, otherwise will not effect

if use Ref and init it before use, it woks but not friendly to end user

[liulinboyi]

First of all.The best way is child component emit event to change the props in the parent component.

All props form a one-way-down binding between the child property and the parent one: when the parent property updates, it will flow down to the child, but not the other way around. This prevents child components from accidentally mutating the parent's state, which can make your app's data flow harder to understand.

one-way-data-flow